`
bozch
  • 浏览: 460419 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

图片黑色阴影

 
阅读更多

 .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>

分享到:
评论

相关推荐

    c# 绘制图片阴影 可以给图片绘制阴影

    2. **阴影颜色和模糊**:定义阴影的颜色,如灰色或黑色,并根据需要设置模糊程度。模糊可以通过在图像周围多次画出逐渐透明的边缘来实现。 3. **阴影的偏移**:为了产生阴影效果,需要将阴影图像在X和Y轴上偏移一定...

    给图片添加阴影效果

    1. **颜色和透明度**:阴影的颜色通常与原图有一定的对比,但并不强烈,比如黑色或深灰色。透明度(Alpha通道)的设置至关重要,较低的透明度可以让阴影与背景更好地融合,提高整体的视觉效果。 2. **偏移量**:...

    图片上面阴影显示文字

    例如,以下代码将为文本添加一个黑色的阴影,偏移5像素向右和3像素向下,模糊半径为2像素: ```css text-shadow: 5px 3px 2px rgba(0, 0, 0, 1); ``` 在图片上实现阴影文字,可能需要将文本与图片合成。这通常涉及...

    Delphi 图形处理技术,给图片加上阴影相框.rar

    在这个案例中,我们加的是黑色阴影,也就是在图片周围添加一个黑色边缘,以营造出立体感和深度效果。这个过程涉及到的主要知识点包括: 1. **位图操作**:在Delphi中,我们可以使用TBitmap对象来操作图像。首先,...

    鼠标移动到图片上给图片加阴影/左右移动样式

    这段代码会在鼠标悬停在图片上时,给图片添加一个向下偏移4像素,模糊半径为6像素的黑色阴影,透明度为0.1。`box-shadow`属性接受多个参数,分别代表阴影的水平偏移、垂直偏移、模糊半径和颜色。 除了阴影效果,...

    CSS实现当鼠标滑过图片出现阴影效果

    `rgba(0, 0, 0, 0.5)`表示黑色阴影,其中的`0.5`代表透明度,值越大阴影越不透明。 `transition`属性则用于定义元素从一种样式变换到另一种样式的过渡效果。`0.3s`表示过渡时间为0.3秒,`ease`是过渡速度曲线,可以...

    用png图片实现 google 立体阴影Div的实现.rar

    由于PNG支持透明度,我们可以利用半透明的黑色或灰色像素来模拟阴影的渐变,使阴影边缘平滑过渡,与背景融合,达到立体感。 2. CSS: CSS(Cascading Style Sheets)是用于控制网页元素样式的一种语言。在实现...

    css3实现的图片边框阴影特效.zip

    这个样式将为图片添加一个向右下角偏移2px,向下偏移4px,模糊半径6px,黑色且透明度为50%的阴影。 在实际应用中,我们可以通过调整这些参数来创建各种复杂的边框阴影效果。例如,使用多层阴影可以模拟3D效果: ``...

    javascript经典特效---带阴影的图片.rar

    例如,可以创建一个与图片大小相同的div作为容器,设置其背景颜色为半透明黑色,并通过CSS的`top`、`left`、`right`、`bottom`属性调整阴影的位置和形状。 以下是一个简单的JavaScript阴影实现的步骤: 1. **HTML...

    纯CSS实现鼠标移上图片添加阴影效果.rar

    在这个例子中,当鼠标悬停在图片上时,阴影会在图片的下侧和右侧偏移2像素,具有5像素的模糊半径,并且颜色是半透明的黑色(`rgba(0, 0, 0, 0.3)`)。`rgba`颜色值允许我们指定一个带有透明度(alpha)的色彩,其中`...

    鼠标移动到图片上加上文字和阴影.rar

    这个CSS代码将为图片添加一个半透明的黑色背景(阴影效果),并在鼠标悬停时显示包含文字的层。`transition`属性提供了平滑的动画效果,使视觉体验更加友好。 在实际应用中,你可能还需要考虑一些其他因素,如响应...

    css3鼠标悬停图片内部放大和阴影特效

    这段代码为图片添加了一个向下和向右偏移10像素,模糊半径为0的黑色阴影,透明度为50%。 此外,为了实现遮罩层的效果,通常会有一个半透明的div覆盖在图片上。我们可以用`position`、`width`、`height`、`...

    Android实现图片添加阴影效果的2种方法

    阴影的颜色是`#60000000`,这是一种半透明的黑色,而背景图片的颜色是完全不透明的黑色`#000000`。不过,这种方法的一个缺点是阴影边缘是实边,没有虚化效果,可能不够自然。 ### 第二种方法:自定义View并使用`...

    CSS3图片相册立体阴影效果.zip

    `会为元素添加一个右下角偏移10像素,模糊半径5像素的黑色阴影,`rgba`中的最后一个参数表示透明度。 接下来,jQuery插件的使用增强了动态效果。jQuery提供了一系列便捷的DOM操作和动画方法,使得开发者能够轻松...

    Android 图片阴影效果和影子效果 .zip

    在上述代码中,我们设置了阴影的半径为10像素,横向和纵向偏移均为5像素,阴影颜色为黑色。 然而,对于更复杂的阴影效果,如图片阴影,可能需要借助`Canvas`。`Canvas`是Android图形绘制的基础,它可以用来在Bitmap...

    黑色多边形叠加PPT背景图片.zip

    这个压缩包包含的主图片描述为"黑色多边形叠加PPT背景图片",这意味着它采用了黑色作为主要色调,结合了多边形图形的设计,形成了一种层次感和深度。黑色通常被看作是权威、正式和高雅的颜色,适合用于商业报告、...

    css+div实现图片内阴影效果源码免费下载

    在这个例子中,阴影向内偏移(`inset`),水平和垂直偏移量均为0,模糊半径是10像素,阴影的大小会比元素本身小5像素,颜色是一个半透明的黑色。 现在,让我们讨论如何使用div元素。`div`是HTML中最常用的块级元素...

    android图像阴影效果

    这将在绘制图像时添加一个模糊半径为10像素,水平和垂直偏移各为5像素的黑色阴影。 2. **彩色阴影效果** 默认的阴影颜色通常是黑色,但我们可以自定义颜色。例如,我们可以通过设置ARGB值来创建一个半透明的蓝色...

    Android 图片阴影效果和影子效果源码.zip

    在透明区域的边缘添加黑色像素,可以实现简单的阴影效果,但这种方法灵活性较低,不适用于复杂的阴影需求。 8. **第三方库** Android社区还提供了许多第三方库,如`android-shape-imageview`和`android-gradient-...

Global site tag (gtag.js) - Google Analytics