您的位置：首页 > Web前端 > CSS

H5学习之25 CSS 给图片增加框 透明度的设置

2016-08-05 19:11 363 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div.img{
float:left;
padding:5px;
margin:5px;
border: 1px solid;
border-color: dimgrey;
text-align: center;
width:auto;
height: auto;
}

div.img img{
margin: 3px;
border: 1px solid black;
opacity:0.4;
}
/*
稍微多注意一下选择器选择的元素

opacity:0.4 设置透明度为0.4,鼠标不在图片上的时候透明的。
*/

div.img a:hover img{
border: 1px solid red;
opacity:1;
}
/*
当鼠标移到图片上时设置透明度=1，也就是不透明。
*/

div.desc{
text-align: center;
font-weight: normal;
width:150px;
font-size: 12px;
}
/*------------------------------------------------------------------------------------------------------*/
div.back{
clear:left;
width: 400px;
height: 266px;

border: 1px solid beige;
background-image: url(1.jpg);
text-align: center;
margin: 10px;
padding: 0;
}
div.transbox{
background-color: white;
opacity: 0.6;
width:300px;
height:200px;
margin-left: 50px;
margin-top:33px;
}
p{
margin: 0;
}
/*在这里，我把back的内边距取消，transbox的外边距取消，发现还是无法让trans左上角与back左上角重合，
用chrome查看之后发现是段落p有一个外边距导致，设置成0就可以实现了。
chrome能够很好的查看元素的大小 位置 信息等。*/

</style>

</head>
<body>
<div class="img">
<a target="_blank" href="1.jpg">
<img src="1.jpg" alt="图片" width="160px"  height="160px"  />
</a>
<div class="desc">在此添加对于图片的描述</div>
</div>

<!--结构是一个div，里头套着一个a（a里又有一个img），和一个div，用以创建包裹着 图片的一块区域-->

<div class="img">
<a target="_blank" href="2.jpg">
<img src="2.jpg" alt="图片" width="160px"  height="160px"/>
</a>
<div class="desc" >在此添加对于图片的描述</div>
</div>

<div class="img">
<a target="_blank" href="3.jpg">
<img src="3.jpg" alt="图片" width="160px"  height="160px"/>
</a>
<div class="desc">在此添加对于图片的描述</div>
</div>

<div class="img">
<a target="_blank" href="4.jpg">
<img src="4.jpg" alt="图片" width="160px"  height="160px"/>
</a>
<div class="desc">在此添加对于图片的描述</div>
</div>
<!--------------------------------------------------------------------------------------------------->
<div class="back">
<div class="transbox">
<p>ssssssssssssssssssssssssssss
sssssssssssssssssssssss</p>
</div>
</div>
<!--其实就是一个div 嵌套一个div，内部的div里再有一个段落，给外部的div一个 背景，内部的div设置一下背景颜色，透明度。
再调整一下位置。就好了-->
</body>
</html>


具体效果如下：



代码解释如下：

两个部分。

第一部分是4个并列的图片，而且有框包裹，当鼠标移动到图片上时还可以点击，图片周围还会出现带有颜色的边框。

<div class="img">
<a target="_blank" href="1.jpg">
<img src="1.jpg" alt="图片" width="160px"  height="160px"  />
</a>
<div class="desc">在此添加对于图片的描述</div>
</div>

<!--结构是一个div，里头套着一个a（a里又有一个img），和一个div，用以创建包裹着 图片的一块区域-->

一个图片，不一一赘述

div.img{
float:left;
padding:5px;
margin:5px;
border: 1px solid;
border-color: dimgrey;
text-align: center;
width:auto;
height: auto;
}

div.img img{
margin: 3px;
border: 1px solid black;
opacity:0.4;
}
/*
稍微多注意一下选择器选择的元素

opacity:0.4 设置透明度为0.4,鼠标不在图片上的时候透明的。
*/

div.img a:hover img{
border: 1px solid red;
opacity:1;
}
/*
当鼠标移到图片上时设置透明度=1，也就是不透明。
*/

div.desc{
text-align: center;
font-weight: normal;
width:150px;
font-size: 12px;
}

多注意一下这个结构，是一个div，内嵌着一个div，内部的div里再有一个a标签，a标签的内容是一个img标签

其次就是设置一些样式的简单问题了。

透明度 opacity:0-1 需要IE8以上。现在的大部分浏览器肯定都支持。

第二部分，是一个带有图片背景的区域，区域内有一块透明的区域显示文本。

<div class="back">
<div class="transbox">
<p>ssssssssssssssssssssssssssss
sssssssssssssssssssssss</p>
</div>
</div>
<!--其实就是一个div 嵌套一个div，内部的div里再有一个段落，给外部的div一个 背景，内部的div设置一下背景颜色，透明度。
再调整一下位置。就好了-->

div.back{
clear:left;
width: 400px;
height: 266px;

border: 1px solid beige;
background-image: url(1.jpg);
text-align: center;
margin: 10px;
padding: 0;
}
div.transbox{
background-color: white;
opacity: 0.6;
width:300px;
height:200px;
margin-left: 50px;
margin-top:33px;
}
p{
margin: 0;
}
/*在这里，我把back的内边距取消，transbox的外边距取消，发现还是无法让trans左上角与back左上角重合，
用chrome查看之后发现是段落p有一个外边距导致，设置成0就可以实现了。
chrome能够很好的查看元素的大小 位置 信息等。*/

做这个需要注意的就是上边注释的 位置问题了。调整内部div的margin为0 外部div的padding为0 以为可以让内部div位置出现在00 但是没有 ，还有有一小段，用了chrome浏览器之后发现是因为段落p有margin，设置为0之后，果然内外div重合了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html5 div布局 css
相关文章推荐
新的分享
章节导航