鍍金池/ 問答/HTML/ CSS 背景切除

CSS 背景切除

這種效果css能實(shí)現(xiàn)嗎，把背景切除一個(gè)半圓出來圖片描述

回答
編輯回答
遺莣

你的問題沒有抓不到重點(diǎn)。我觀察你的截圖總結(jié)如下:

  1. 在圖片上有一個(gè)黑色半透明的蒙層
  2. 在蒙層上有一個(gè)鏤空的圓洞
  3. 圓洞上疊加一個(gè)與蒙層同色漸變到透明的圓環(huán)
  4. 圓洞上疊加一個(gè)白色的圓環(huán)

理論上以下代碼可以實(shí)現(xiàn)你說的效果,如下：

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <style>
    body {
        background-color: #ee0; 
    }
    .hollow-mask {
        position: absolute; 
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 100%; 
    }
    .hollow { 
        position: absolute; 
        width: 150px; 
        height: 150px; 
        border-radius: 100%; 
        border: 1000px solid rgba(0, 0, 0, 1); 
        top: 50%; 
        left: 50%; 
        margin: -1075px 0 0 -1075px; 
        opacity: .5; 
    } 
    .hollow::before {
        content: ''; 
        position: absolute; 
        top: -1px;
        left: -1px;
        width: 152px; 
        height: 152px; 
        border-radius: 100%; 
        border: 10px solid #000; 
        box-sizing: border-box;
        /* 做一個(gè)漸變 */
        -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0));
        pointer-events: none; 
    }
    .hollow-after { 
        position: absolute; 
        top: 50%;
        left: 50%;
        width: 130px; 
        height: 130px; 
        border-radius: 100%; 
        border: 8px solid #fff; 
        box-sizing: border-box; 
        margin: -65px 0 0 -65px; 
    }
    </style>
</head>
<body>
<div class="hollow-mask">
    <div class="hollow"></div>
    <div class="hollow-after"></div> 
</div> 
</body>
<script type="text/javascript">

</script>
</html>

效果如下：

clipboard.png

不過，這是在我的機(jī)子上的截圖。

2017年9月11日 18:53
編輯回答
局外人

多圖覆蓋就好

2018年8月18日 04:56
編輯回答
逗婦惱

我有一種實(shí)現(xiàn)方式，先畫一個(gè)圓，再用其他元素遮擋住一半，剩下就是半個(gè)圓了，看代碼吧

clipboard.png

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .a {
            width: 300px;
            height: 300px;
            background: pink;
            margin: 50px auto;
            position: relative;
        }
        .b {
            width: 100%;
            height: 100%;
            background: green;
            border-radius: 50%;
        }
        .c {
            position: absolute;
            top: 0;
            left: 0;
            background: pink;
            height: 150px;
            width: 100%;
        }
    </style>
</head>
<body>
<div class="a">
    <div class="b"></div>
    <div class="c"></div>
</div>
</body>
</html>
2018年2月2日 21:47
編輯回答
嘟尛嘴
<img src='imgdata' />

img{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: block
}
2017年8月11日 19:07