पर एक पारदर्शी div ओवरले कर सकते हैं, मैं फ्लैश में किए गए चित्र में नीचे दिए गए चित्र में इस उदाहरण के पार भाग गया था और मैं सोच रहा था कि उस पर पाठ के साथ एक छवि के नीचे पारदर्शी बॉक्स होने का समान प्रभाव है या नहीं सीएसएस के साथ संभव है या फिर कुछ और फ़्लैश?क्या आप छवि
http://www.ajaxline.com/files/imgloop.png http://www.ajaxline.com/files/imgloop.png
बिल्कुल, ऐसा करने का एक क्रॉस-ब्राउज़र तरीका है:
<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>
इस विधि जावास्क्रिप्ट की आवश्यकता नहीं है, IE में ClearType पाठ खोने के लिए कारण नहीं है, और के साथ संगत है फ़ायरफ़ॉक्स, सफारी, ओपेरा, आईई 6,7,8 ... दुर्भाग्य से, यह केवल पाठ की एक पंक्ति के लिए काम करता है। यदि आप कई लाइनों को चाहते हैं, तो div.imageSub div की height और line-height संपत्ति समायोजित करें, या निम्न का उपयोग करें (सीएसएस में संशोधन और लेबल को दो बार निर्दिष्ट करने की आवश्यकता है)।
<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>
।
<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>
यह आश्चर्यजनक है कि आप बहुत बहुत धन्यवाद! – JasonDavis
वाईएसलो फ़ायरफ़ॉक्स प्लगइन चलाते समय मुझे लगता है कि खराब उपयोग होने का उल्लेख करने वाली चीजों में से 1 सीएसएस अभिव्यक्ति है, इसे सही में से एक नहीं माना जाता है? – JasonDavis
** @ जेसॉन्डाविस: ** 'फ़िल्टर' और' -एमएस-filter' उनमें से एक है लेकिन आपके पास IE के लिए विकल्प नहीं है। और याद रखें, ** YSlow ** कानून नहीं है। –