今天做一个防一些团购网站的信息显示，将图片的说明显示在图片之上且背景半透明效果，然后用css实习了一下，做了demo，主要运用css定位技术
效果图：
代码实习：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>将图片的说明显示在图片之上且背景半透明效果</title>
<style type="text/css">
body { text-align: center; font-family:Verdana; font-size:12px; }
.img-demo { position: relative; display: block; width:250px; height:250px; margin: 0 auto; }
.img-demo .info {
background: #EEE; /*设置背景色*/
-moz-opacity:.80; filter:alpha(opacity=80); opacity:.80; color: #000; /*透明度，兼容于其他浏览器*/
position: absolute; bottom: 0; left: 0;/* 定位于其的位置，让其能够显示在图片的上*/
width: 250px; padding: 8px 2px; text-align:left;
}
.redcol{ color:red; }
</style>
</head>
<body>
<h2>将图片的说明显示在图片之上且背景半透明效果</h2>
<div class="img-demo">
<img src="1.jpg" alt="" />
<span class="info">
原价:<span style="text-decoration:line-through">16.00</span>元 折扣:<b>4.4</b>折
<span style="float:right"> <b class="redcol">256</b>人购买</span></span>
</div>
</body>
</html>
分享到：
相关推荐
之前发过一篇关于 将图片的说明文字显示在图片之上且背景半透明效果 的文章，讲述了如何将文字置于图片之上且背景半透明，但那个解决办法会出现一个问题，就是背景虽然半透明了，但文字也会半透明，今天发现百度旅游...
我们可以为说明文字的容器定义样式，使其在显示时具有半透明效果。例如： ```css #description { position: absolute; /* 设置绝对定位 */ background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */ color: ...
在CSS中，我们可以使用`position`属性将文字定位在图片之上。这里设置`position: absolute;`使文字相对于其最近的具有`position: relative;`的祖先元素（在这里是`.photo`）进行定位。同时，为了使文字不覆盖图片，...
开启此选项后，窗口边缘将变得半透明，提供了一种视觉上的层次感和空间感。 透明度的实现通常是通过图形用户界面（GUI）的底层技术，如DirectX或OpenGL实现的。这些图形库提供了对像素透明度的控制，允许开发者创建...
在实现半透明效果时，关键在于设置背景颜色和透明度。通常，我们会在布局文件中为PopupWindow定义一个背景，然后通过设置其Alpha值来控制透明度。例如，可以将背景设置为一个颜色值，如#AA000000，这里的AA表示10...
底图层：在容器最底部，作用是显示非选择区域的图片，透明效果就是在这层设置； 切割层：最关键的一个层，在底图层和控制层之间，在这个层通过clip设置其可视区域来实现切割图片的效果； 控制层：位于顶部，拖放(_...
半透明图层是一种常见的实现手段，它可以在用户界面之上覆盖一层半透明的视图，显示关键操作的指示或者提示信息，既不会完全遮挡原有的界面元素，又能清晰地引导用户注意力。 要创建这样的用户引导，我们需要遵循...
1. **PNG（Portable Network Graphics）**：PNG是一种无损压缩的位图格式，支持透明度（阿尔法通道），使得图像可以有不同程度的透明或半透明效果，常用于网页设计和图形编辑。 2. **BMP（Bitmap）**：BMP是Windows...
标题中的“falsh支持360透明设置”指的是在Flash开发环境中，如何实现SWF文件在360度全景展示时具有透明效果的技术要点。在Flash中，透明性是通过Alpha通道来控制的，允许开发者创建半透明或完全透明的元素，从而...
"JS+CSS3透明的霜雾玻璃图片预览特效"是一个利用JavaScript和CSS3技术实现的高级功能，它允许用户在鼠标悬停或点击时，对图片进行预览，同时呈现出一种类似于霜雾玻璃的半透明效果，既美观又实用。这个压缩包文件...
3. **半透明背景色**：为了增强画廊的视觉吸引力，Gallerybox允许设置半透明背景色。这种设计可以使焦点更加集中在当前显示的图片上，同时保持整体界面的美观和谐。 4. **淡入淡出动画过渡**：在切换图片时，...
- **Alpha通道**：表示透明度，常用于需要半透明效果的图像。 - **HDR**（高动态范围）：支持更广泛的亮度值，适用于光线复杂的场景。 4. **纹理尺寸**： - **Power of Two (2的幂)**：Unity推荐使用2的幂次方...
**蒙版效果**通过在图片上添加半透明的形状（如矩形），让底层图片部分显示出来，从而创造出层次感和深度。 - **左图示例**：通过拉出一条渐变色的矩形并调整其一侧的透明度，可以轻松地将多张图片置于一侧，无需...
2. **半透明效果实现：** 通过CSS属性opacity和filter，开发者可以控制HTML元素的透明度。opacity属性接受0到1之间的值，0为完全透明，1为完全不透明。filter属性则用于IE浏览器的兼容，Alpha滤镜可以设置opacity的...
标题中的“透明高斯黑色背景博客响应式手机模板”指的是一个设计用于移动设备的网站模板，该模板采用了独特的设计风格，结合了透明效果、高斯模糊处理的黑色背景，以及响应式布局，使得网站在不同屏幕尺寸的手机上都...
透明度可以通过调整`opacity`属性来控制，而背景颜色通常是黑色或深灰色，以达到半透明效果。 3. **JavaScript 或 jQuery**：如果需要动态显示和隐藏遮罩层，可能需要使用JavaScript或jQuery。例如，当用户点击某个...
开发者可以利用这些控件来创建更加美观和交互性更强的界面，例如将Label放在图片或图表之上，显示说明文字，而不会干扰到下面的内容。 在Windows Forms开发中，可以通过设置Label控件的`Backparency`属性为`True`，...
实例221 当鼠标经过图片时显示图片 344 实例222 改变图片获取焦点时的状态 345 实例223 抖动的图片 346 实例224 鼠标移动放大图片 347 8.3 图片与时间相关操作 349 实例225 定时隐藏图片 349 实例226 根据时间变换...
5.jquery+div漂亮SmartMenu下拉菜单气泡透明效果 6.jQuery+div实现flash炫彩菜单插件下载 7.jquery+div实用漂亮精致的多级导航栏菜单插件代码示例 8.jQuery+ul实现漂亮竖直下拉菜单 9.jquery仿google首页...