Tôi chạy qua ví dụ này trong hình ảnh bên dưới được thực hiện trong Flash và tôi tự hỏi liệu có ảnh hưởng tương tự đến việc có hộp trong suốt ở dưới cùng của hình ảnh với văn bản trên đó không có thể với CSS hoặc cái gì khác sau đó flash?Bạn có thể che phủ một div trong suốt trên một hình ảnh
http://www.ajaxline.com/files/imgloop.png http://www.ajaxline.com/files/imgloop.png
Chắc chắn, đây là một cách qua trình duyệt làm như vậy:
<html>
<head>
<style type="text/css">
div.imageSub { position: relative; }
div.imageSub img { z-index: 1; }
div.imageSub div {
position: absolute;
left: 15%;
right: 15%;
bottom: 0;
padding: 4px;
height: 16px;
line-height: 16px;
text-align: center;
overflow: hidden;
}
div.imageSub div.blackbg {
z-index: 2;
background-color: #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: 0.5;
}
div.imageSub div.label {
z-index: 3;
color: white;
}
</style>
</head>
<body>
<div class="imageSub" style="width: 300px;"> <!-- Put Your Image Width -->
<img src="image.jpg" alt="Something" />
<div class="blackbg"></div>
<div class="label">Label Goes Here</div>
</div>
</body>
</html>
Phương pháp này không yêu cầu JavaScript, không gây mất văn bản ClearType trong IE, và tương thích với Firefox, Safari, Opera, IE6,7,8 ... Thật không may, nó chỉ hoạt động cho một dòng văn bản. Nếu bạn muốn nhiều dòng, hãy điều chỉnh div.imageSub div 's height và line-height thuộc tính hoặc sử dụng (sửa đổi đối với CSS và yêu cầu nhãn phải được chỉ định hai lần).
<html>
<head>
<style type="text/css">
div.imageSub { position: relative; }
div.imageSub img { z-index: 1; }
div.imageSub div {
position: absolute;
left: 15%;
right: 15%;
bottom: 0;
padding: 4px;
}
div.imageSub div.blackbg {
z-index: 2;
color: #000;
background-color: #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: 0.5;
}
div.imageSub div.label {
z-index: 3;
color: white;
}
</style>
</head>
<body>
<div class="imageSub" style="width: 300px;"> <!-- Put Your Image Width -->
<img src="image.jpg" alt="Something" />
<div class="blackbg">Label Goes Here</div>
<div class="label">Label Goes Here</div>
</div>
</body>
</html>
Chắc chắn.
<div style="background-image: url(image.png);" >
<div style="position:relative; top:20px; left:20px;">
Some text here
</div>
</div>
<html>
<body>
<div style="position: absolute; border: solid 1px red">
<img src="http://www.ajaxline.com/files/imgloop.png"/>
<div style="position: absolute; top:0px; left:40%; width:20%; height: 10%; background-color: gray; opacity: .80; -moz-opacity: 0.80; filter:alpha(opacity=80);"/>
<div style="position: absolute; top:0px; left:40%; width:20%; height: 10%; color: white;">
Hello
</div>
</div>
</body>
</html>
Điều này thật tuyệt vời cảm ơn bạn rất nhiều! – JasonDavis
khi chạy plugin firefox YSlow Tôi nhận thấy 1 trong những điều nó đề cập đến việc sử dụng xấu là Biểu thức CSS, điều này không được coi là một trong những chính xác? – JasonDavis
** @ jasondavis: ** 'filter' và' -ms-filter' là một trong số chúng nhưng bạn không có lựa chọn cho IE. Và hãy nhớ, ** YSlow ** không phải là luật. –