CSS 图像透明/不透明
CSS3中属性的透明度是 opacity
图像的透明度 - 悬停效果
示例:
img
{
opacity:0.4;
}
img:hover
{
opacity:1.0;
}
透明的盒子中的文字
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>div.background
{
width:500px;
height:250px;
background:url(https://www.runoob.com/images/klematis.jpg) repeat;
border:2px solid black;
}
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
opacity:0.6;
}
div.transbox p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
}</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>这些文本在透明框里
</p>
</div>
</div>
</body>
</html>
首先,我们创建一个固定的高度和宽度的div元素,带有一个背景图片和边框。然后我们在第一个div内部创建一个较小的div元素。 这个div也有一个固定的宽度,背景颜色,边框 - 而且它是透明的。透明的div里面,我们在P元素内部添加一些文本。
CSS 图像拼合技术
图像拼合
图像拼合就是单个图像的集合。
有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。
使用图像拼合会降低服务器的请求数量,并节省带宽。
简单来说,就是把多个图拼成一张图,然后让这一张图的不同部位点击有不同效果