單一背景爲多個科室

Question

是否有一種方式爲一個圖像（PNG或SVG）作爲多個科室的背景？請參閱下面的圖片，瞭解它的工作原理。另外，當屏幕寬度變小並且divs排列在彼此之下時，是否會有一種方法來改變背景以與之匹配？

的DIV沒有背景：

背景：

的div背景：

Answer 1

使用background-attachment: fixed會給你想要的效果。你只需要確保div的範圍之內的背景圖片的工作，否則你會得到瓦片可與background-repeat: none

.border { 
 
    border: 1px solid #000; 
 
    position: absolute; 
 
} 
 

 
div { 
 
    background-image: url("https://dummyimage.com/500x250/000/fff.png"); 
 
    background-attachment: fixed; 
 
}

<div id="div1" class="border" style="height:100px;width:200px"></div> 
 
<div id="div2" class="border" style="left:225px;height:100px;width:200px"></div> 
 
<div id="div3" class="border" style="top: 125px;height:100px;width:225px"></div> 
 
<div id="div4" class="border" style="left:250px;top:125px;height:100px;width:175px"></div>

Answer 2

你可能會尋找background-attachment: fixed：

如果一個背景 - 圖像是規格ified，background-attachment CSS 屬性確定該圖像的位置在 視口內是固定的，還是與其包含的塊一起滾動。

.container { 
 
    background-color: gray; 
 
} 
 

 
.window { 
 
    background-image: url("https://i.stack.imgur.com/RPBBs.jpg"); 
 
    background-attachment: fixed; 
 
    display: inline-block; 
 
}

<div class="container"> 
 
    <div class="window" style="width: 100px; height: 50px; margin: 20px;"></div> 
 
    <div class="window" style="width: 200px; height: 50px; margin: 20px;"></div> 
 
    <div class="window" style="width: 500px; height: 50px; margin: 20px;"></div> 
 
</div>

Answer 3

怎麼樣了？我對HTML和CSS還比較陌生，但我認爲我們可以一起解決這個問題！

你的「整體」的畫面可能會在包含其他「窗口」元素存在......其中每個窗口元素的相對定位到包含整個畫面父DIV

.whole{ 
 
    
 
    position:relative; 
 
    
 
} 
 

 
.UpperL{ 
 

 
    position: absolute; 
 
    height: 25px; 
 
    width: 100px; 
 

 
} 
 
.UpperR{ 
 
    position:...; 
 
    
 
} 
 
.LowerL{ 
 

 
    position:...; 
 

 
} 
 
.LowerR{ 
 

 
    position:...; 
 

 
}

<div class="whole" img src="whole picture.png"> 
 
<!-- let the whole class contain the background image--> 
 

 
    <div class="UpperL"> Upper Left Window</div> 
 
    <div class="UpperR"> Upper Left Window</div> 
 
    <div class="LowerL"> Upper Left Window</div> 
 
    <div class="LowerR"> Upper Left Window</div> 
 
</div>

代碼不運行良好呢，但設置第五窗內四個窗口的一點是給四個能力或適當通過第五次看到;

如果您的父母包含圖像，但仍是全白色（不透明度爲100％），則四個窗口元素應該能夠看透第五個窗口的不透明度（將其不透明度向下以顯示圖像） 。

嗯......