在身体的多背景 [英] Multiple Backgrounds on Body

问题描述

不确定是否可以，但我可以在网站的标准背景图片上放置一个透明图片。

  {
 font-family：Arial，Helvetica，sans-serif; 
 text-align：center; 
 background：＃133e6f url（{{site_img_dir}} / body-bg.gif）repeat-x; 
} 
  

这是正常的背景图片。我想添加另一个透明.png在这一个是一个非重复的图像。

解决方案

在单个元素上拥有多个背景：

  .myclass {
 background：background1，background2， ...，backgroundN; 
} 
  

更复杂的示例：
< br> 3背景与其他背景属性：

Note1：您可以定义 background-repeat 和

$>

$ background background $ background background （和其他类似 background-size b $ b

  .multi_bg_example {
 / *背景1，图像* /背景：url（img1），
 / *背景2， / linear-gradient（to right，rgba（255，255，255，0），rgba（255，255，255，1）），
 / * background 3，image * / url（img3） 
 background-repeat：无重复，无重复，重复; 
 background-position：bottom right，left，right; 
} 
  

注2：第一个出现在顶部，

Mozilla开发人员网络，CSS多重背景：


http://developer.mozilla.org/en-US/docs / CSS / Tutorials / Using_CSS_multiple_backgrounds

Not sure if this is possible but can i put one transparent image over the standard background image on the website.

    body {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  background: #133e6f url({{ site_img_dir }}/body-bg.gif) repeat-x;
}

This is the normal background image. I want to add another transparent .png over this one which is a non-repeat image. How can this be done ?

Thanks

解决方案

To have Multiple Backgrounds on a Single Element:

.myclass {
  background: background1, background2, ..., backgroundN;
}

More complex example:
3 backgrounds with other background properties:
Note1: You can define background-repeat and background-position (and others like background-size) properties for each of the 3 backgrounds individually.

.multi_bg_example {
  /* Background 1, an image   */ background: url(img1),
  /* Background 2, a gradient */ linear-gradient(to right, rgba(255, 255, 255, 0),  rgba(255, 255, 255, 1)),
  /* Background 3, an image   */ url(img3);
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: bottom right, left, right;
}

Note2: The first one appears on top, second one below it, etc...

Source: Mozilla Developer Network, CSS multiple backgrounds:
http://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_multiple_backgrounds

这篇关于在身体的多背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！