CSS - 顯示背景圖像div

我有一個組件創建了一些其中有一個洞的形狀，組件有一個堅實的背景，我希望這個洞顯示它下面的背景圖像（所以它看起來像一個實際孔）。CSS - 顯示背景圖像div

降價將是這樣的：

<body> 
    <div class="component"> 
    <div class="hole"></div> 
    </div> 
</body>

而且款式：

body { 
    background-image: url(some-image.jpg); 
    background-size: cover; 
} 

.component { 
    background: black; 
    height: 200px; 
    width: 200px; 
    position: relative; 
} 

.component .hole { 
    background: transparent !important; // not sure 
    height: 20px; 
    width: 20px; 
    margin: auto; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
}

能不能做到？有沒有解決方法？

編輯

按照要求，你可能會發現該組件here

的狗牌有一個堅實的背景和它上面的孔應顯示下方的背景。

您可以在my repo發現以及代碼：body styles，dogtag styles，home markup和dogtag markup。

來源

2016-05-08 RecuencoJones

我不確定我明白你的意思但有一個特徵不透明度：0.8;值在0.0到1.0之間。

來源

2016-05-08 08:33:58

但是，增加不透明度爲.component不會使其背景堅實，對嗎？我可以嘗試tho – RecuencoJones

-1

不能這樣做。在您的HTML頁面中使用dosent underatand它...但是您可以像這樣做HTML頁面。

<div="hole">

來源

2016-05-08 08:34:52 Tolani

好吧，我沒有寫整個HTML降價，只是重要的部分hahaha – RecuencoJones

我visualy仍然不知道什麼是你想完成，您可以添加現場演示只是更清晰......

，但如果你想使用透明的背景，也許你可以在樣式表使用：

.hole{ 
    background-color:rgba(0,0,0,0); 
}

來源

2016-05-08 08:43:41 DikaDikz

添加鏈接到演示和回購澄清，稍後會添加實際的片段（對不起，我在移動rn） – RecuencoJones

.hole背景無法穿透下面的元素背景。您可以製作另一個物體來填充灰色以形成您想要的形狀，而不需要觸摸.hole區域 – DikaDikz

，或者您可以滴眼與天空顏色相同的顏色在.hole的body bcground中，並使用一個小小的漸變來製作訣竅......或者你可以使用HTML canvas createImageData（）方法在每個像素中創建圖像（但是ithink很難）...並且簡單的方法，爲什麼你不使用圖像文件？嚴重的是，你可以像在一分鐘內在photoshop上創建形狀......只是說:)。 – DikaDikz

試試這個代碼

<style> 

     #box { 
      height: 100px; 
      width: 100px; 
      background: url("photos/bamboo.jpg") no-repeat; 
      background-size: cover; 
      border: 10px solid red; 
      border-radius: 50%; 
     } 
    </style> 
</head> 

<body> 

    <div id="box"></div> 


</body>

來源

2016-05-08 08:45:44

我想我可以放置相同的身體和洞的背景，併爲他們排隊祈禱。剛剛嘗試和有點作品，但有時它不適合，兩個圖像都沒有對齊。 – RecuencoJones

對不起，我不明白那個..給我一些代碼，如果你想 –

只需添加代碼，回購和實際演示的問題！ – RecuencoJones

CSS - 顯示背景圖像div

回答

相關問題