.event{
padding:0;
width:460px;
min-width: 460px;
border:0px solid #e4e4e4;
height: 350px;
min-height: 350px;
position: relative;
}
.event img{height:300px;width:460px;border: 0;}
.event .title{
background: #95c04c;
color:white;
width:100%;
height:32px;
padding:6px 6px 6px 8px;
margin-left:0;
margin-top:8px;
}
.imgGrayCover{
display: none;width: 100%;position: absolute;top: 0;left: 0;padding: 10px;background: #000;background: rgba(0, 0, 0, .5);z-index: 8085;text-shadow:none;height:300px;
}
<!-- pull-right、pull-left 、thumbnail为bootstrap的样式-->
<div class="event pull-left thumbnail">
<div class="imgGrayCover"></div>
<img src="../img/index/onshow.jpg" alt="活动预告"/>
<div class="title">
<span class="pull-left">活动预告</span>
<span class="pull-right">+</span>
</div>
</div>
<script type="text/javascript">
$(function(){
$('.eventEntry .event').hover(function(){
$(this).find('.imgGrayCover').show();
},function(){
$(this).find('.imgGrayCover').hide();
});
});
</script>
相关推荐
2. **阴影颜色和模糊**:定义阴影的颜色,如灰色或黑色,并根据需要设置模糊程度。模糊可以通过在图像周围多次画出逐渐透明的边缘来实现。 3. **阴影的偏移**:为了产生阴影效果,需要将阴影图像在X和Y轴上偏移一定...
1. **颜色和透明度**:阴影的颜色通常与原图有一定的对比,但并不强烈,比如黑色或深灰色。透明度(Alpha通道)的设置至关重要,较低的透明度可以让阴影与背景更好地融合,提高整体的视觉效果。 2. **偏移量**:...
例如,以下代码将为文本添加一个黑色的阴影,偏移5像素向右和3像素向下,模糊半径为2像素: ```css text-shadow: 5px 3px 2px rgba(0, 0, 0, 1); ``` 在图片上实现阴影文字,可能需要将文本与图片合成。这通常涉及...
在这个案例中,我们加的是黑色阴影,也就是在图片周围添加一个黑色边缘,以营造出立体感和深度效果。这个过程涉及到的主要知识点包括: 1. **位图操作**:在Delphi中,我们可以使用TBitmap对象来操作图像。首先,...
这段代码会在鼠标悬停在图片上时,给图片添加一个向下偏移4像素,模糊半径为6像素的黑色阴影,透明度为0.1。`box-shadow`属性接受多个参数,分别代表阴影的水平偏移、垂直偏移、模糊半径和颜色。 除了阴影效果,...
`rgba(0, 0, 0, 0.5)`表示黑色阴影,其中的`0.5`代表透明度,值越大阴影越不透明。 `transition`属性则用于定义元素从一种样式变换到另一种样式的过渡效果。`0.3s`表示过渡时间为0.3秒,`ease`是过渡速度曲线,可以...
由于PNG支持透明度,我们可以利用半透明的黑色或灰色像素来模拟阴影的渐变,使阴影边缘平滑过渡,与背景融合,达到立体感。 2. CSS: CSS(Cascading Style Sheets)是用于控制网页元素样式的一种语言。在实现...
这个样式将为图片添加一个向右下角偏移2px,向下偏移4px,模糊半径6px,黑色且透明度为50%的阴影。 在实际应用中,我们可以通过调整这些参数来创建各种复杂的边框阴影效果。例如,使用多层阴影可以模拟3D效果: ``...
例如,可以创建一个与图片大小相同的div作为容器,设置其背景颜色为半透明黑色,并通过CSS的`top`、`left`、`right`、`bottom`属性调整阴影的位置和形状。 以下是一个简单的JavaScript阴影实现的步骤: 1. **HTML...
在这个例子中,当鼠标悬停在图片上时,阴影会在图片的下侧和右侧偏移2像素,具有5像素的模糊半径,并且颜色是半透明的黑色(`rgba(0, 0, 0, 0.3)`)。`rgba`颜色值允许我们指定一个带有透明度(alpha)的色彩,其中`...
这个CSS代码将为图片添加一个半透明的黑色背景(阴影效果),并在鼠标悬停时显示包含文字的层。`transition`属性提供了平滑的动画效果,使视觉体验更加友好。 在实际应用中,你可能还需要考虑一些其他因素,如响应...
这段代码为图片添加了一个向下和向右偏移10像素,模糊半径为0的黑色阴影,透明度为50%。 此外,为了实现遮罩层的效果,通常会有一个半透明的div覆盖在图片上。我们可以用`position`、`width`、`height`、`...
阴影的颜色是`#60000000`,这是一种半透明的黑色,而背景图片的颜色是完全不透明的黑色`#000000`。不过,这种方法的一个缺点是阴影边缘是实边,没有虚化效果,可能不够自然。 ### 第二种方法:自定义View并使用`...
`会为元素添加一个右下角偏移10像素,模糊半径5像素的黑色阴影,`rgba`中的最后一个参数表示透明度。 接下来,jQuery插件的使用增强了动态效果。jQuery提供了一系列便捷的DOM操作和动画方法,使得开发者能够轻松...
在上述代码中,我们设置了阴影的半径为10像素,横向和纵向偏移均为5像素,阴影颜色为黑色。 然而,对于更复杂的阴影效果,如图片阴影,可能需要借助`Canvas`。`Canvas`是Android图形绘制的基础,它可以用来在Bitmap...
这个压缩包包含的主图片描述为"黑色多边形叠加PPT背景图片",这意味着它采用了黑色作为主要色调,结合了多边形图形的设计,形成了一种层次感和深度。黑色通常被看作是权威、正式和高雅的颜色,适合用于商业报告、...
在这个例子中,阴影向内偏移(`inset`),水平和垂直偏移量均为0,模糊半径是10像素,阴影的大小会比元素本身小5像素,颜色是一个半透明的黑色。 现在,让我们讨论如何使用div元素。`div`是HTML中最常用的块级元素...
这将在绘制图像时添加一个模糊半径为10像素,水平和垂直偏移各为5像素的黑色阴影。 2. **彩色阴影效果** 默认的阴影颜色通常是黑色,但我们可以自定义颜色。例如,我们可以通过设置ARGB值来创建一个半透明的蓝色...
在透明区域的边缘添加黑色像素,可以实现简单的阴影效果,但这种方法灵活性较低,不适用于复杂的阴影需求。 8. **第三方库** Android社区还提供了许多第三方库,如`android-shape-imageview`和`android-gradient-...