如何在CSS中合并背景图像+线性渐变？背景图像上的线性梯度

b5buobof 于 2023-08-09 发布在其他

关注(0)|答案(3)|浏览(136)

祝你们一切顺利。
所以我有一个带有背景图像的部分，我想在背景图像上添加一个线性渐变。
我的目标是：
x1c 0d1x的数据
到目前为止，我有一个带有背景图像的div。
当前CSS：

background-image: url("../pixels/lastCallToActionBg.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;

字符串
我想添加的线性Gradient CSS：

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjElIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTUlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(
  top,
  rgba(0, 0, 0, 1) 0%,
  rgba(0, 0, 0, 1) 1%,
  rgba(0, 0, 0, 0) 15%,
  rgba(0, 0, 0, 0) 100%
); /* FF3.6-15 */
background: -webkit-gradient(
  linear,
  left top,
  left bottom,
  color-stop(0%, rgba(0, 0, 0, 1)),
  color-stop(1%, rgba(0, 0, 0, 1)),
  color-stop(15%, rgba(0, 0, 0, 0)),
  color-stop(100%, rgba(0, 0, 0, 0))
); /* Chrome4-9,Safari4-5 */
background: -webkit-linear-gradient(
  top,
  rgba(0, 0, 0, 1) 0%,
  rgba(0, 0, 0, 1) 1%,
  rgba(0, 0, 0, 0) 15%,
  rgba(0, 0, 0, 0) 100%
); /* Chrome10-25,Safari5.1-6 */
background: -o-linear-gradient(
  top,
  rgba(0, 0, 0, 1) 0%,
  rgba(0, 0, 0, 1) 1%,
  rgba(0, 0, 0, 0) 15%,
  rgba(0, 0, 0, 0) 100%
); /* Opera 11.10-11.50 */ /* IE10 preview */
background: -webkit-gradient(
  linear,
  left top,
  left bottom,
  from(rgba(0, 0, 0, 1)),
  color-stop(1%, rgba(0, 0, 0, 1)),
  color-stop(15%, rgba(0, 0, 0, 0)),
  to(rgba(0, 0, 0, 0))
);
background: -moz-linear-gradient(
  top,
  rgba(0, 0, 0, 1) 0%,
  rgba(0, 0, 0, 1) 1%,
  rgba(0, 0, 0, 0) 15%,
  rgba(0, 0, 0, 0) 100%
);
background: linear-gradient(
  to bottom,
  rgba(0, 0, 0, 1) 0%,
  rgba(0, 0, 0, 1) 1%,
  rgba(0, 0, 0, 0) 15%,
  rgba(0, 0, 0, 0) 100%
); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); /* IE6-8 */

型

谢谢-谢谢

css

来源：https://stackoverflow.com/questions/64462862/how-to-combine-background-image-linear-gradient-in-css-linear-gradient-over

3条答案

按热度按时间

zf9nrax11#

在区域内做一个div，它将作为一个蒙版，并将这个蒙版的渐变设置为其中的背景。
掩码的css看起来像这样：

position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;

字符串
因此它将遍布父元素（节）

section {

    width: 100vw;
    height: 10rem;
    background: url(https://www.yannickdixon.com/wp-content/uploads/2016/12/161124-golden-seaside-sunset-photography-print.jpg);
}

.overlay {

position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjElIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTUlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient( top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 100% );
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 1)), color-stop(1%, rgba(0, 0, 0, 1)), color-stop(15%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)) );
    background: -webkit-linear-gradient( top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 100% );
    background: -o-linear-gradient( top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 100% );
    background: -webkit-gradient( linear, left top, left bottom, from(rgba(0, 0, 0, 1)), color-stop(1%, rgba(0, 0, 0, 1)), color-stop(15%, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)) );
    background: -moz-linear-gradient( top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 100% );
    background: linear-gradient( to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 100% );
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 );
}

<section>
<div class="overlay"></div>
</section>

的数据

赞(0）回复(0）举报 2023-08-09

vxbzzdmp2#

试试这个

body {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(https://actionseaze.com/wp-content/uploads/2020/02/sunset.jpg), 
  -webkit-linear-gradient(
    top,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 1%,
    rgba(0, 0, 0, 0) 35%,
    rgba(0, 0, 0, 0) 100%
  );
  background-blend-mode: color;
  height: 100vh;
}

字符串

赞(0）回复(0）举报 2023-08-09

jhiyze9q3#

你也可以使用::after css psuedo-element来实现这一点。

body::after{
    content: '';
    linear-gradient(
        top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 1) 1%,
        rgba(0, 0, 0, 0) 35%,
        rgba(0, 0, 0, 0) 100%
  );
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

字符串

赞(0）回复(0）举报 2023-08-09

我来回答

如何在CSS中合并背景图像+线性渐变？背景图像上的线性梯度

3条答案

相关问题

热门标签

最新问答