css 透明框中的文本
2018-11-24 本文已影响0人
邵毅超
透明的关键字：opacity。
(IE8以及更早版本要用filter，并设置“alpha(opacity=60)”参数）
首先，我们创建一个 div 元素 (class="background")，它有固定的高度和宽度、背景图像，以及边框。然后我们在第一个 div 内创建稍小的 div (class="transbox")。"transbox" div 有固定的宽度、背景色和边框 - 并且它是透明的。在透明 div 内部，我们在 p 元素中加入了一些文本。
<!DOCTYPE html>
<html>
<head>
<style>
div.background
{
width: 298px;
height: 500px;
background: url('img/手表.jpg') no-repeat;
margin:0 auto;
}
div.transbox
{
width: 298px;
height: 500px;
border-radius: 10px;
background-color: #ffffff;
border: 5px solid pink;
opacity:0.3;
}
div.transbox p
{
margin: 30px 40px;
line-height: 500px;
text-align: center;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>Glock</p>
</div>
</div>
</body>
</html>
image.png
