CSS同时使用背景图和渐变色

CSS同时使用背景图和渐变色

需求

一个盒子,在拥有渐变色的前提下还需要同时拥有背景图层

类似如下的效果

代码实现

首先我们按照常规的写css的方式来写

复制代码
<div class="box"></div>

 .box{
            width: 300px;
            height: 120px;
            border-radius: 15px;
            background-color:#ff5e62;
            background-image:url('./btc1.png');   
            background-position: right 20px top 50%;
            background-repeat: no-repeat;
        }

这种图片加背景的写法没什么问题。可以正常显示背景和图片

但是我们把背景换成渐变色以后就出问题了

不显示渐变色,只显示一个图片

复制代码
background:linear-gradient(to right, #ff9966, #ff5e62);

完整写法

把背景图和渐变色写在一起

这里url一定要写在前面,展示在上层,如果写在linear-gradient后面就只会显示渐变色

复制代码
.box{
      width: 300px;
      height: 120px;
      border-radius: 15px;
      background:
        url('./btc1.png') right 20px top 50% / 50px 50px no-repeat,
        linear-gradient(to right, #ff9966, #ff5e62);
    }

上面的代码最终呈现的效果

相关推荐
滿几秒前
Vue 3 中按照某个字段将数组分成多个数组
前端·javascript·vue.js
安分小尧12 分钟前
[特殊字符] 使用 Handsontable 构建一个支持 Excel 公式计算的动态表格
前端·javascript·react.js·typescript·excel
好_快20 分钟前
Lodash源码阅读-baseClone
前端·javascript·源码阅读
Double Point20 分钟前
(三十一) Dart 中的网络请求教程:从知乎日报 API 获取数据
前端
excel22 分钟前
webpack 核心编译器 十二 节
前端
好_快22 分钟前
Lodash源码阅读-baseToString
前端·javascript·源码阅读
好_快23 分钟前
Lodash源码阅读-initCloneByTag
前端·javascript·源码阅读
木木黄木木26 分钟前
HTML5重力球动画实现详解
前端·html·html5
好_快27 分钟前
Lodash源码阅读-cloneSymbol
前端·javascript·源码阅读
excel27 分钟前
webpack 核心编译器 十一 节
前端