css 在背景图上加渐变

<html>

<head>
<title>我的第一个 HTML 页面</title>
<style>
    .banner {
        width: 100%;
        background: linear-gradient(to right bottom,rgba(0,0,0,0.9),rgba(0,0,0,0)),url(2.jpg) no-repeat center;
        height: 300px;
        color:white;
    }
  .center{
      width:1200px;
      margin:0 auto;
  }
</style>
</head>

<body>
 
    <div class="banner">
        <div class="center">
            <hgroup>
                <h2>开发者文档</h2>
                <h3>开发者在创建公众号、获得接口权限后,可阅读开发者文档帮助完成接入及功能开发。</h3>
            </hgroup>
        </div>
    </div>
    
</body>

</html>

 

转载于:https://www.cnblogs.com/lunawzh/p/7199173.html

### 实现图片叠渐变背景色效果 为了在 CSS 中实现图片叠渐变背景色的效果,可以利用 `background-image` 属性中的多个层叠功能。通过指定线性渐变(linear-gradient)作为第一个背景层,并将其与实际的图片背景一起定义在同一属性中,即可达到所需效果。 以下是具体的实现方法: #### 使用线性渐变图片 可以通过以下方式设置背景样式: ```css body { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1573480813647-552e9b7b5394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2253&q=80'); background-size: cover; background-repeat: no-repeat; background-position: center; } ``` 在此代码片段中,`linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))` 定义了一个半透明黑色的渐变层[^1],而后面的 URL 则指定了要显示的实际背景图片。两个背景层会自动堆叠在一起,其中渐变层位于顶部[^3]。 #### 背景层顺序的重要性 需要注意的是,在 `background-image` 的声明中,各个图像或渐变按照书写顺序从前到后依次绘制。这意味着最先写入的内容会被放置于最顶层。因此,如果希望渐变覆盖在图片之上,则应先写出渐变部分再接续图片链接[^5]。 #### 处理不同浏览器兼容性问题 尽管现代主流浏览器普遍支持这种多重背景技术,但在某些较旧版本或者特定环境下可能仍需额外考虑跨平台一致性。为此可以在原有基础上增一些前缀处理以增强适应范围,例如 `-webkit-linear-gradient`, `-moz-linear-gradient`, 和 `-o-linear-gradient` 等替代形式[^4]: ```css body { background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('...'); background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('...'); background-image: -o-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('...'); background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('...'); ... } ``` 以上配置能够有效保障大多数情况下的正常呈现效果[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值