html颜色王全透明,王老师html零基础课后练习第8课——圆角阴影hover

摘要：

在现在的网站产品介绍中，经常会出现把鼠标放在图片上就会显示出一段文字的介绍，这个是怎么使用的呢？一起来看看关于hover的使用，设置圆角和阴影

今天要做的演示效果入选，就是很多网站上的产品都会有的显示

hover把鼠标放图片上显示文字出现

先来看看CSS样式属性内容：#box{

position:relative;

width:300px;

height:300px;

margin:100px auto;

overflow:hidden;/*超出隐藏,再通过定位和hover改变定位的位置到达效果*/

}

.meg{

position:absolute;

left:301px;;

top:0px;

width:300px;

height:300px;

background-color:#dfdfdf;

background-color:rgba(0,0,0,0.3);/*只单独透明背景的颜色,文字不会改变,

如果用opacity:0.3会连文字一起透明了*/

border-radius:50%;

}

span{

display:block;

text-align:center;

margin-top:130px;

}

p{margin:10px;text-align:center;}

/*选择父级的一个盒子以后,hover后面要加空格?在+需要改变的盒子的参数*/

#box:hover .meg{

left:0px;

}

从上面的代码中不难发现，图片的圆角加了一个border-radius设置了一个圆角

然后加了一个透明的背景色，设置透明度

下面部分为html标签内容：

新品上市

IPSA明星王牌套装