当前位置： 文江博客话题详情

背景图像上的半透明颜色层？

发布于 2025-01-03 04:21:21 字数 239 浏览 0 评论 0原文

我有一个 DIV，我想放置一个图案作为背景。这个图案是灰色的。所以为了让它更漂亮一点，我想在上面放一个浅色透明的颜色“层”。以下是我尝试过但没有成功的方法。有没有办法将彩色图层放在背景图像上？

这是我的 CSS：

background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);
原文

I have a DIV and I would like to put a pattern as background. This pattern is gray. So to make it a little more nice, I would like to put a light transparent color "layer" over. Below is what I tried but which did not work. Is there a way to put the colored layer over the background image?

Here's my CSS:

background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（20）

忆梦 2025-01-10 04:21:22

您还可以为叠加颜色添加不透明度。

您可以这样做

background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);

：

background: url('../img/bg/diagonalnoise.png');

然后为不透明度颜色创建一个新样式：

.colorStyle{
    background-color: rgba(248, 247, 216, 0.7);
    opacity: 0.8;
}

将不透明度更改为您想要的低于 1 的任何数字。然后使该颜色样式与图像大小相同。它应该有效。

You can also add opacity to your overlay color.

Instead of doing

background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);

You can do:

background: url('../img/bg/diagonalnoise.png');

Then create a new style for the opacity color:

.colorStyle{
    background-color: rgba(248, 247, 216, 0.7);
    opacity: 0.8;
}

Change the opacity to whatever number you want below 1. Then you make this color style the same size as your image. It should work.

回复 原文
英雄似剑 2025-01-10 04:21:22
#img-div{
    height: 100vh;
    background-image: url("https://images.pexels.com/photos/46160/field-clouds-sky-earth-46160.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

#overlay-div{
    background-color: rgba(0, 0, 0, 0.5);
    height: 100vh;
    position: relative;
}
<div id="img-div">
  <div id="overlay-div"></div>
</div>

#img-div{
    height: 100vh;
    background-image: url("https://images.pexels.com/photos/46160/field-clouds-sky-earth-46160.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

#overlay-div{
    background-color: rgba(0, 0, 0, 0.5);
    height: 100vh;
    position: relative;
}
<div id="img-div">
  <div id="overlay-div"></div>
</div>

回复 原文
何以畏孤独 2025-01-10 04:21:22

在伪类之前使用并使用不透明度

.left-side {
  position: relative;
  background-color: #5200ff; /*bg color*/
}

.left-side::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(./images/img.jpeg);  /*bg image*/
  background-size: cover;
  background-position: 100%;
  opacity: 0.22;  /*use opacity to show bg color */
}

Use before pseudo-class and use opacity

.left-side {
  position: relative;
  background-color: #5200ff; /*bg color*/
}

.left-side::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(./images/img.jpeg);  /*bg image*/
  background-size: cover;
  background-position: 100%;
  opacity: 0.22;  /*use opacity to show bg color */
}
回复 原文
栖竹 2025-01-10 04:21:22

天哪，这里有一些复杂的答案。早在 2017 年，这是可以理解的，但现在你可以把...

background: url('../img/bg/diagonalnoise.png'), rgba(248, 247, 216, 0.7);
background-blend-mode: overlay;

在 2024 年 background-blend-mode 适用于一切除了 IE 和可怕的 Opera-Mini

Gosh there are some complicated answers here. Back in 2017 that was understandable, but nowadays you can just put...

background: url('../img/bg/diagonalnoise.png'), rgba(248, 247, 216, 0.7);
background-blend-mode: overlay;

In 2024 background-blend-mode works for everything except IE and the horrific Opera-Mini

回复 原文
半步萧音过轻尘 2025-01-10 04:21:21

我知道这是一个非常古老的线程，但它显示在 Google 的顶部，所以这里有另一个选择。

这是纯 CSS，不需要任何额外的 HTML。

box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);

盒子阴影功能的用途数量惊人。

I know this is a really old thread, but it shows up at the top in Google, so here's another option.

This one is pure CSS, and doesn't require any extra HTML.

box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);

There are a surprising number of uses for the box-shadow feature.

回复 原文
橘和柠 2025-01-10 04:21:21

这是：

.background {
    background:url('../img/bg/diagonalnoise.png');
    position: relative;
}

.layer {
    background-color: rgba(248, 247, 216, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML：

<div class="background">
    <div class="layer">
    </div>
</div>

当然，如果其中没有其他元素，您需要为 .background 类定义宽度和高度

Here it is:

.background {
    background:url('../img/bg/diagonalnoise.png');
    position: relative;
}

.layer {
    background-color: rgba(248, 247, 216, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML for this:

<div class="background">
    <div class="layer">
    </div>
</div>

Of course you need to define a width and height to the .background class, if there are no other elements inside of it

回复 原文
一张白纸 2025-01-10 04:21:21

来自 CSS-Tricks...有一种一步法可以做到这一点，无需 z 索引和添加伪元素 - 需要线性渐变，我认为这意味着你需要 CSS3 支持

.tinted-image {
  background-image: 
    /* top, transparent red */
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* your image */
    url(image.jpg);
}

From CSS-Tricks... there is a one step way to do this without z-indexing and adding pseudo elements-- requires linear gradient which I think means you need CSS3 support

.tinted-image {
  background-image: 
    /* top, transparent red */
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* your image */
    url(image.jpg);
}
回复 原文
不可一世的女人 2025-01-10 04:21:21

您还可以使用线性渐变和图像：
http://codepen.io/anon/pen/RPweox

.background{
  background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
    url('http://www.imageurl.com');
}

这是因为线性渐变函数创建了一个添加的图像到后台堆栈。 https://developer.mozilla.org/en-US/docs/Web/CSS/线性渐变

You can also use a linear gradient and an image:
http://codepen.io/anon/pen/RPweox

.background{
  background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
    url('http://www.imageurl.com');
}

This is because the linear gradient function creates an Image which is added to the background stack. https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

回复 原文
梦回梦里 2025-01-10 04:21:21

试试这个。对我有用。

.background {
    background-image: url(images/images.jpg);
    display: block;
    position: relative;
}

.background::after {
    content: "";
    background: rgba(45, 88, 35, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.background > * {
    z-index: 10;
}

Try this. Works for me.

.background {
    background-image: url(images/images.jpg);
    display: block;
    position: relative;
}

.background::after {
    content: "";
    background: rgba(45, 88, 35, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.background > * {
    z-index: 10;
}
回复 原文
冷夜 2025-01-10 04:21:21

然后，您需要一个带有 bg 图像的包装元素，其中包含带有 bg color:

<div id="Wrapper">
  <div id="Content">
    <!-- content here -->
  </div>
</div>

和 css: 的内容元素：

#Wrapper{
    background:url(../img/bg/diagonalnoise.png); 
    width:300px; 
    height:300px;
}

#Content{
    background-color:rgba(248,247,216,0.7); 
    width:100%; 
    height:100%;
}

You need then a wrapping element with the bg image and in it the content element with the bg color:

<div id="Wrapper">
  <div id="Content">
    <!-- content here -->
  </div>
</div>

and the css:

#Wrapper{
    background:url(../img/bg/diagonalnoise.png); 
    width:300px; 
    height:300px;
}

#Content{
    background-color:rgba(248,247,216,0.7); 
    width:100%; 
    height:100%;
}
回复 原文
养猫人 2025-01-10 04:21:21

我使用此方法对图像应用色调和渐变，以便在无法控制图像颜色配置文件时更轻松地设置动态叠加文本的样式以提高易读性。您不必担心 z-index。

HTML

<div class="background-image"></div>

SASS

.background-image {
  background: url('../img/bg/diagonalnoise.png') repeat;
  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(248, 247, 216, 0.7);
  }
}

CSS

.background-image {
  background: url('../img/bg/diagonalnoise.png') repeat;
}

.background-image:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(248, 247, 216, 0.7);
  }

希望有帮助

I've used this as a way to both apply colour tints as well as gradients to images to make dynamic overlaying text easier to style for legibility when you can't control image colour profiles. You don't have to worry about z-index.

HTML

<div class="background-image"></div>

SASS

.background-image {
  background: url('../img/bg/diagonalnoise.png') repeat;
  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(248, 247, 216, 0.7);
  }
}

CSS

.background-image {
  background: url('../img/bg/diagonalnoise.png') repeat;
}

.background-image:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(248, 247, 216, 0.7);
  }

Hope it helps

回复 原文
肤浅与狂妄 2025-01-10 04:21:21

请参阅我的答案 https://stackoverflow.com/a/18471979/193494 以全面了解可能的解决方案：

  1. 使用具有线性渐变的多个背景、
  2. 具有生成的 PNG 的多个背景，或
  3. 设计 :after 伪元素以充当辅助背景层。

See my answer at https://stackoverflow.com/a/18471979/193494 for a comprehensive overview of possible solutions:

  1. using multiple backgrounds with a linear gradient,
  2. multiple backgrounds with a generated PNG, or
  3. styling an :after pseudoelement to act as a secondary background layer.
回复 原文
一场信仰旅途 2025-01-10 04:21:21

为什么这么复杂？您的解决方案几乎是正确的，只是它是一种更容易使图案透明且背景色纯色的方法。 PNG 可以包含透明胶片。因此，使用 Photoshop 将图层设置为 70% 并重新保存图像，使图案透明。那么你只需要一个选择器。跨浏览器工作。

CSS：

.background {
   background: url('../img/bg/diagonalnoise.png');/* transparent png image*/
   background-color: rgb(248, 247, 216);
}

HTML：

<div class="background">
   ...
</div>

这是基本的。下面是我从 background 切换到 background-image 的用法示例，但两个属性的工作原理相同。

body { margin: 0; }
div {
   height: 110px !important;
   padding: 1em;
   text-transform: uppercase;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: 600;
   color: white;
   text-shadow: 0 0 2px #333;
}
.background {
   background-image: url('https://www.transparenttextures.com/patterns/arabesque.png');/* transparent png image */
   }
.col-one {
  background-color: rgb(255, 255, 0);
}
.col-two {
  background-color: rgb(0, 255, 255);
}
.col-three {
  background-color: rgb(0, 255, 0);
}
<div class="background col-one">
 1. Background
</div> 
<div class="background col-two">
 2. Background
</div> 
<div class="background col-three">
 3. Background
</div>

请稍等！加载外部模式需要一些时间。

这个网站似乎相当慢......

Why so complicated? Your solution was almost right except it's a way easier to make the pattern transparent and the background color solid. PNG can contain transparencies. So use photoshop to make the pattern transparent by setting the layer to 70% and resaving your image. Then you only need one selector. Works cross browser.

CSS:

.background {
   background: url('../img/bg/diagonalnoise.png');/* transparent png image*/
   background-color: rgb(248, 247, 216);
}

HTML:

<div class="background">
   ...
</div>

This are the basic. A usage example follows where I switched from background to background-image but both properties works the same.

body { margin: 0; }
div {
   height: 110px !important;
   padding: 1em;
   text-transform: uppercase;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: 600;
   color: white;
   text-shadow: 0 0 2px #333;
}
.background {
   background-image: url('https://www.transparenttextures.com/patterns/arabesque.png');/* transparent png image */
   }
.col-one {
  background-color: rgb(255, 255, 0);
}
.col-two {
  background-color: rgb(0, 255, 255);
}
.col-three {
  background-color: rgb(0, 255, 0);
}
<div class="background col-one">
 1. Background
</div> 
<div class="background col-two">
 2. Background
</div> 
<div class="background col-three">
 3. Background
</div>

PLEASE WAIT A MINUTE! IT TAKES SOME TIME TO LOAD THE EXTERNAL PATTERNS.

This website seems to be rather slow...

回复 原文
燕归巢 2025-01-10 04:21:21
background-image: linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(0,0,0,0.6) 0),url(images/image.jpg);

background-image: linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(0,0,0,0.6) 0),url(images/image.jpg);
回复 原文
你不是我要的菜∠ 2025-01-10 04:21:21

来自我的回答 如何添加颜色叠加到背景图像？标记为该问题的重复其中不需要伪元素，也不需要额外元素。

就在这里，几年后，这个重复项仍然缺少 background-blend-mode 属性，现在已广泛实施（它位于多重背景和插图阴影示例）。

所以这里是关于我的答案，答案为您提供了 3 种简单的方法，无需额外的标记或伪代码：

首先，我当时看到了两个简单的选项（2016 年，这两个选项也在此处的答案内，所以没有什么真正的选择）关于这些的新添加，...介意第三个（如果您已经阅读了有关 bg 和 box-shadow 的其他答案）：

  • 在旧图像上具有半透明单一渐变的多个背景<一href="http://codepen.io/gc-nomade/pen/wouBe" rel="noreferrer">codepen 我的，有几个例子。

  • 巨大的嵌入阴影，其作用与渐变叠加大致相同

其中给出的示例：

渐变选项：

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients

CSS 渐变由 数据类型表示，这是一种特殊类型的 ，由两种或多种颜色之间的渐进过渡组成。您可以在三种类型的渐变之间进行选择：线性（使用 Linear-gradient() 函数创建）、径向（使用 Radial-gradient() 函数创建）和圆锥曲线（使用 conic-gradient() 函数创建）。您还可以使用 repeating-linear-gradient()、repeating-radial-gradient() 和 repeating-conic-gradient()< 创建重复渐变/code> 函数。

渐变可以用在任何需要使用的地方，例如背景。由于渐变是动态生成的，因此它们可以消除传统上用于实现类似效果的光栅图像文件的需要。此外，由于渐变是由浏览器生成的，因此放大时它们看起来比光栅图像更好，并且可以动态调整大小。

    html {
      min-height:100%;
      background:linear-gradient(0deg, rgba(255, 0, 150, 0.3), rgba(255, 0, 150, 0.3)), url(https://picsum.photos/id/100/2500/1656);
      background-size:cover;
    }

阴影选项：

https://developer.mozilla.org/en- US/docs/Web/CSS/box-shadow

box-shadow CSS 属性在元素框架周围添加阴影效果。您可以设置多个效果，以逗号分隔。盒子阴影由相对于元素的 X 和 Y 偏移、模糊和扩散半径以及颜色来描述。

插图

如果未指定（默认），则假定阴影为投影（就好像框在内容上方凸起）。 inset 关键字的存在将阴影更改为框架内的阴影（就好像内容被压在框内一样）。内嵌阴影绘制在边框内部（甚至是透明边框）、背景上方、内容下方。

html {
  min-height: 100%;
  background: url(https://picsum.photos/id/100/2500/1656);
  background-size: cover;
  box-shadow: inset 0 0 0 2000px rgba(255, 0, 150, 0.3);
}

我的一个旧的 codepen ，其中有一些示例

现在，这里缺少第三个选项< /strong> :

background-blend-mode CSS 属性设置元素的背景图像应如何相互混合以及与元素的背景颜色混合。

html {
  min-height: 100%;
  background: url(https://picsum.photos/id/100/2500/1656) rgba(255, 0, 150, 0.3);
  background-size: cover;
  background-blend-mode: multiply;
}

当然还有其他有价值的方法可以做到这一点，具体取决于您的项目、使用的 CSS 库以及您现有的选项。几乎从来没有单一的方式/方法，而是不同的方式。重要的是找到最适合您的需求且最有效的选项，您理解/掌握的方法，浏览器的特殊性，已经使用的选项留下的选项如果您对或已经拥有可以/完成这项工作的 javascript 或服务器端函数有信心，请使用它（如果它已经存在）。轮子就是轮子。

from an answer of mine at How to add a color overlay to a background image? marked as a duplicate of that question where no pseudo element ,nor extra element is required.

That duplicate, right here and after a few years, is still missing the background-blend-mode property , widely implemented nowdays (It lays below the multiple background and inset shadow examples).

So here is about my answer out there, answer that gives you 3 easy ways without extra markup nor pseudos :

At first , i saw two easy options at that time (2016, those two option are also within answers standing here too, so nothing really new to add about these, ... mind the third one if you already read other answers about bg and box-shadow):

  • multiple background with a translucent single gradient over image from an an old codepen of mine with few examples.

  • huge inset shadow which does about the same thing as a gradient overlay

Examples given out there where:

gradient option:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients

CSS gradients are represented by the <gradient> data type, a special type of <image> made of a progressive transition between two or more colors. You can choose between three types of gradients: linear (created with the linear-gradient() function), radial (created with the radial-gradient() function), and conic (created with the conic-gradient() function). You can also create repeating gradients with the repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient() functions.

Gradients can be used anywhere you would use an <image>, such as in backgrounds. Because gradients are dynamically generated, they can negate the need for the raster image files that traditionally were used to achieve similar effects. In addition, because gradients are generated by the browser, they look better than raster images when zoomed in, and can be resized on the fly.

    html {
      min-height:100%;
      background:linear-gradient(0deg, rgba(255, 0, 150, 0.3), rgba(255, 0, 150, 0.3)), url(https://picsum.photos/id/100/2500/1656);
      background-size:cover;
    }

shadow option:

https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.

inset

If not specified (default), the shadow is assumed to be a drop shadow (as if the box were raised above the content). The presence of the inset keyword changes the shadow to one inside the frame (as if the content was depressed inside the box). Inset shadows are drawn inside the border (even transparent ones), above the background, but below content.

html {
  min-height: 100%;
  background: url(https://picsum.photos/id/100/2500/1656);
  background-size: cover;
  box-shadow: inset 0 0 0 2000px rgba(255, 0, 150, 0.3);
}

an old codepen of mine with few examples

Now, that third option missing here :

The background-blend-mode CSS property sets how an element's background images should blend with each other and with the element's background color.

html {
  min-height: 100%;
  background: url(https://picsum.photos/id/100/2500/1656) rgba(255, 0, 150, 0.3);
  background-size: cover;
  background-blend-mode: multiply;
}

There is of course and also other valuable ways to do this, depending on your project, CSS libraries used and the few option left over from what you already have. There is almost never a single way/method , but different ways .What matters is to find the option that suits your needs the best and efficiently, the method that you understand/master , the browser specifity, option left over from what already being used if you feel confident with or already have a javascript or a server side function that already can/do that job, use it if its already there. a wheel is a wheel.

回复 原文
夜访吸血鬼 2025-01-10 04:21:21

您可以使用半透明像素，您可以在此处生成该像素，即使是在 base64 中
这是一个白色 50% 的示例：

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=),
url(../img/leftpanel/intro1.png);
background-size: cover, cover;

  • 没有上传

  • 没有额外的 html

  • 我猜加载应该比 box-shadow 或线性渐变更快

You can use a semitransparent pixel, which you can generate for example here, even in base64
Here is an example with white 50%:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=),
url(../img/leftpanel/intro1.png);
background-size: cover, cover;

  • without uploading

  • without extra html

  • i guess the loading should be quicker than box-shadow or linear gradient

回复 原文
情归归情 2025-01-10 04:21:21

这是一个更简单的技巧，仅使用 css。

<div class="background"> </div>
    <style>
    .background {
      position:relative;
      height:50px;
      background-color: rgba(248, 247, 216, 0.7);
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC); 
    }

    .background:after {
        content:" ";
        background-color:inherit;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; 
    }

    </style>

Here is a more simple trick with only css.

<div class="background"> </div>
    <style>
    .background {
      position:relative;
      height:50px;
      background-color: rgba(248, 247, 216, 0.7);
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC); 
    }

    .background:after {
        content:" ";
        background-color:inherit;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; 
    }

    </style>

回复 原文
寂寞笑我太脆弱 2025-01-10 04:21:21

另一种将 SVG 作为内联覆盖图像（注意：如果您在 svg 代码中使用 # ，则必须对其进行 urlencode！）：

background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><path fill="rgba(255, 255, 255, 0.4)" d="M0 0h1v1H0z"/></svg>')
                no-repeat center center/cover, 
            url('overlayed-image.jpg') no-repeat center center/cover;

Another one with an SVG as inline overlay-image (note: if you use # inside the svg-code you have to urlencode that!):

background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><path fill="rgba(255, 255, 255, 0.4)" d="M0 0h1v1H0z"/></svg>')
                no-repeat center center/cover, 
            url('overlayed-image.jpg') no-repeat center center/cover;
回复 原文
蓦然回首 2025-01-10 04:21:21

我只是使用 background-image css 属性目标背景div。
注意背景图像仅接受渐变颜色函数。
因此，我使用线性渐变添加相同的所需叠加颜色两次（使用最后的 rgba 值来控制颜色不透明度）。

另外，还找到了这两个有用的资源：

  1. 在背景图像上添加文本（或带有任何其他内容的 div）： 英雄图像
  2. 仅模糊背景图像，而不模糊顶部的 div：模糊背景图片

HTML

<div class="header_div">
</div>

<div class="header_text">
  <h1>Header Text</h1>
</div>

CSS

.header_div {
  position: relative;
  text-align: cover;
  min-height: 90vh;
  margin-top: 5vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  background-image: linear-gradient(rgba(38, 32, 96, 0.2), rgba(38, 32, 96, 0.4)), url("images\\header img2.jpg");
  filter: blur(2px);
}

.header_text {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
}

I simply used background-image css property on the target background div.
Note background-image only accepts gradient color functions.
So I used linear-gradient adding the same desired overlay color twice (use last rgba value to control color opacity).

Also, found these two useful resources to:

  1. Add text (or div with any other content) over the background image: Hero Image
  2. Blur background image only, without blurring the div on top: Blurred Background Image

HTML

<div class="header_div">
</div>

<div class="header_text">
  <h1>Header Text</h1>
</div>

CSS

.header_div {
  position: relative;
  text-align: cover;
  min-height: 90vh;
  margin-top: 5vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  background-image: linear-gradient(rgba(38, 32, 96, 0.2), rgba(38, 32, 96, 0.4)), url("images\\header img2.jpg");
  filter: blur(2px);
}

.header_text {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
}
回复 原文
浪菊怪哟 2025-01-10 04:21:21

实际上，我以不同的方式使用了 :before，我只使用了一个 HTML 元素

并仅使用了一个 CSS 类名并使用了伪元素技巧：

.background {
  /* ↓↓↓ the decorative CSS */

  font-family: tahoma;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border-radius: 8px;
  overflow: hidden;
  
  /* ↓↓↓ the main CSS */

  position: relative;
  background: url('https://picsum.photos/id/355/600/400') no-repeat center / cover;
  z-index: 1;
}

.background:before {
  /* ↓↓↓ the main CSS */

  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.5);
  z-index: -1;
}

.text {
  /* ↓↓↓ the decorative CSS */

  font-size: 20px;
  color: #072252;
}
<div class="background">
  <span class="text">Some child</span>
  <span class="text"></span>
</div>

Actually, I used :before in a different way, I just used one HTML element <div> and using just one CSS class name and using pseudo-element trick:

.background {
  /* ↓↓↓ the decorative CSS */

  font-family: tahoma;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border-radius: 8px;
  overflow: hidden;
  
  /* ↓↓↓ the main CSS */

  position: relative;
  background: url('https://picsum.photos/id/355/600/400') no-repeat center / cover;
  z-index: 1;
}

.background:before {
  /* ↓↓↓ the main CSS */

  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.5);
  z-index: -1;
}

.text {
  /* ↓↓↓ the decorative CSS */

  font-size: 20px;
  color: #072252;
}
<div class="background">
  <span class="text">Some child</span>
  <span class="text"></span>
</div>

回复 原文
~没有更多了~

关于作者

梦罢

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

卷耳

文章 0 评论 0

佚名

文章 0 评论 0

℉服软

文章 0 评论 0

qq_2gSKZM

文章 0 评论 0

凉宸

文章 0 评论 0

gyhjy

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文