这种效果css能实现吗，把背景切除一个半圆出来

CSS 背景切除

发布于
2017-11-04

我有一种实现方式，先画一个圆，再用其他元素遮挡住一半，剩下就是半个圆了，看代码吧

<!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>

leeenx

61456

发布于
2017-11-04

更新于
2017-11-04

你的问题没有抓不到重点。我观察你的截图总结如下:

在图片上有一个黑色半透明的蒙层
在蒙层上有一个镂空的圆洞
圆洞上叠加一个与蒙层同色渐变到透明的圆环
圆洞上叠加一个白色的圆环

理论上以下代码可以实现你说的效果,如下：

<!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;
        /* 做一个渐变 */
        -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>

效果如下：

不过，这是在我的机子上的截图。

zwwill_木羽

6.3k2931

发布于
2017-11-07

多图覆盖就好

mcfly

1592960

发布于
2017-11-03

更新于
2017-11-03

<img src='imgdata' />

img{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: block
}

CSS 背景切除

你尚未登录，登录后可以

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？

图片沿着圆环的转动有什么方法吗？

flex相关 flex: 1的子元素如何宽度能100%且不溢出？

CSS如何巧妙实现标题居中、关闭按钮居右效果？

如何处理 CSS calc() 函数中的单位不一致问题？

js阻止冒泡问题？