用CSS3切出透明圓形

我想在CSS3中製作這個形狀。可能嗎？：S用CSS3切出透明圓形

enter image description here

我的計劃是把圖片的背景，所以我想這部分是透明的（即圓形部分）

編輯：最大的問題是，背景不實顏色，它是圖像和背景div身體必須是半透明的。

來源

2014-01-21 josephynooby

我不認爲這是可能的CSS。但是，這可能與svg。 – otinanai

-4

我站正確！你可以使用CSS3創建一些複雜的形狀..感謝分享所有的解決方案。

忽略以下內容：不，您不能使用CSS3創建複雜的形狀。您可以使用SVG或HTML5畫布創建它們。如果我正確理解你的問題，你只是想添加一個帶有透明度的圖像作爲背景圖片？要做到這一點，只需創建一個帶有透明背景（.gif，.png，.svg）的圖像並使用它。帶有透明區域的圖像可以用於CSS3。

來源

2014-01-21 14:58:47 EStafford

-1

據我所知，只能繪製矩形並添加一個與背景顏色相同的圓以模仿透明圓的效果。見jsfiddle：

<div id="box"> 
    <div id="circle"> 
     &nbsp; 
    </div> 
</div>

body {background-color:Purple;} 

#box { 
    margin:5em; 
    border-radius: 0.5em 0.5em 0 0; 
    position:absolute; 
    width:10em; 
    height:5em; 
    background:Black; /* default background */ 
    background:linear-gradient(to bottom, Black, #555); 
} 

#circle { 
    margin-left:3em; 
    border-radius:4em; 
    position:absolute; 
    top:-2em; 
    width:4em; 
    height:4em; 
    background:Purple; 
}

更改<body>標籤的背景顏色，你會看到整個圈子。

來源

2014-01-21 15:14:51

這是一個使用漸變作爲背景圖像的僅CSS版本。

Fiddle

div { 
    width: 235px; 
    height: 115px; 
    border-radius: 6px 6px 0 0; 
    background-color: #717172; 
    background-image: 
     radial-gradient(center, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 50%), 
     linear-gradient(top, rgba(0,0,0,1) 0%, rgba(113,113,114,1) 100%); 
    background-size: 128px 128px, 100%, 100%; 
    background-position: center -54px, left top; 
    background-repeat: no-repeat, repeat 
}

（跳過供應商前綴在這裏，但不是在小提琴）

要唱反調：CSS成熟了很多，只是使用一些想象力。 :)

來源

2014-01-21 15:27:58 MildlySerious

biigist問題是bg不是純色，它是圖像：div和body的S和bg必須是半透明的 – josephynooby

然後你會想看看SVG。：P它不僅僅是CSS，而是絕對可以構建的Web兼容標準。 – MildlySerious

我修復了webkit的代碼。請參閱http://jsfiddle.net/vals/j2JNW/2/ – vals

切出的圓只能用CSS使用箱陰影。下面的演示已固定的高度/寬度，但也可以才達到相同的輸出與百分之大小，因此使它響應：

DEMO

輸出：

cut out circle with CSS

body{ 
 
    background:url(http://lorempixel.com/output/people-q-g-640-480-7.jpg); 
 
    background-size:cover; 
 
} 
 
div{ 
 
    width:600px; height:350px; 
 
    overflow:hidden; 
 
    position:relative; 
 
    margin:0 auto; 
 
    border-top-left-radius:20px; 
 
    border-top-right-radius:20px; 
 
    z-index:1; 
 
} 
 
div:before,div:after{ 
 
    content:''; 
 
    position:absolute;  
 
} 
 
div:before{ 
 
    top:-50px; left:225px; 
 
    width:150px; height:150px; 
 
    border-radius:50%; 
 
    box-shadow: 0px 0px 0px 9999px #000; 
 
    z-index:-1; 
 
} 
 
div:after{ 
 
    top:0;left:0; 
 
    width:100%; height:100%; 
 
    box-shadow: inset 0px -300px 600px -300px #fff; 
 
}

<div></div>

來源

2014-09-22 08:22:54

圖像已經消失，您可以上傳imgur上的圖像並將其用作替代品嗎？ –

用CSS3切出透明圓形

回答

相關問題