在div 底部显示背景图片

30 篇文章 0 订阅
下面代码实现div层背景图片在底部显示:
div {
background : url (/images/bg.jpg) no-repeat fixed ;
background-position-y: bottom ;
}
代码详解:
div {
background-image : url (/images/bg.jpg);   /*设置div层的背景图片*/
background-repeat : no-repeat ;   /*背景图片不重复显示*/
background-repeat : repeat ;   /*背景图片横向及纵向重复*/
background-repeat : repeat-x ;   /*背景图片横向重复*/
background-repeat : repeat-y ;   /*背景图片纵向重复*/
background-attachment : fixed ;   /*固定背景图片*/
background-attachment : scroll ;   /*滚动背景图片*/
background-position-x: left ;   /*背景图片在横向的最左方显示*/
background-position-x: right ;   /*背景图片在横向的最右方显示*/
background-position-y: top ;   /*背景图片在纵向的最上方显示*/
background-position-y: bottom ;   /*背景图片在纵向的最下方显示*/
}
  • 5
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用以下的HTML和CSS代码来实现图片底部透明遮罩文字标题: HTML代码: ```html <div class="image-container"> <img src="your-image-url" alt="your-image-alt-text"> <div class="overlay"> <h2>Your Title Here</h2> </div> </div> ``` CSS代码: ```css .image-container { position: relative; display: inline-block; overflow: hidden; } .image-container img { display: block; width: 100%; height: auto; } .overlay { position: absolute; bottom: 0; left: 0; width: 100%; background-color: rgba(0, 0, 0, 0.6); color: #fff; padding: 10px; box-sizing: border-box; transition: all 0.3s ease; } .overlay h2 { margin: 0; } .image-container:hover .overlay { transform: translateY(-100%); } ``` 解释一下: 首先,我们使用一个 `div` 元素作为图片容器,并设置其为相对定位。接着,我们在容器内部放置一个 `img` 元素用于显示图片,并设置其为块级元素,宽度为100%,高度自适应。 接下来,我们再在容器内部放置一个 `div` 元素,用于显示标题。我们将其设置为绝对定位,底部对齐,左侧对齐,宽度为100%,背景颜色为半透明黑色,文字颜色为白色,内部添加10px的内边距,并设置盒模型为 `box-sizing: border-box`,以便于我们在设置内边距时不会影响元素的实际宽度。 最后,我们使用CSS3的过渡效果,当鼠标悬停在容器上时,将标题向上移动,露出图片底部的部分,从而实现了透明遮罩效果。 需要注意的是,以上CSS代码中的 `rgba(0, 0, 0, 0.6)` 表示半透明黑色,其中最后一个参数 `0.6` 可以根据需要进行调整。同时,需要将代码中的 `your-image-url` 和 `your-image-alt-text` 替换为实际的图片 URL 和替代文本。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值