如何在元素 css 中透明元素

Question

Today I'm working on a project, but I've to subtract the element in a element, but how can you do that?今天我在做一个项目，但是我必须减去一个元素中的元素，但是你怎么能这样做呢？

the green element should be subtracted.应该减去绿色元素。 But how can you do that?但是你怎么能这样做呢？

Thanks for advance.感谢提前。

Answer 1

Using some CSS magic you can create the shape you want:使用一些 CSS 魔法，您可以创建您想要的形状：

 .container { width: 300px; height: 750px; position: relative; background-color: lightgray; }.phone { position: absolute; border-radius: 25px; width: 250px; height: 700px; left: 25px; top: 25px; background-color: black; }.screen-top { width: 250px; height: 40px; left: 45px; top: 45px; position: relative; overflow: hidden; border-radius: 30px 30px 0 0; }.screen-top:before { z-index: 1; content: ''; position: absolute; left: 15%; bottom: calc(100% - 30px); width: 70%; height: 100%; border-radius: 0 0 30px 30px; box-shadow: 0px 300px 0px 300px white; }.screen-bottom { position: absolute; top: 85px; left: 45px; width: 250px; height: 660px; border-radius: 0 0 30px 30px; background-color: white; }

 <div class="container"> <div class="phone"></div> <div class="screen-top"></div> <div class="screen-bottom"></div> <div class="screen-content"></div> </div>

Answer 2

if you can (at least approximately) get the dimensions of that part of the phone, you vould solve it with a bit of css:如果您可以（至少大约）获得手机该部分的尺寸，您可以用一点 css 来解决它：

body {
    background: goldenrod;
    height: 100vh /* optional */
} 

#map {
    position: relative; /* needed if #page != body */
    background: url(your/path/to/map);
    display: flex;
    justify-content: center; /* center the green elem horizontally */
    height: 100vh; /* optional */
}
#box {
   background: goldenrod; /* (color of page bg, so we hack transparency) */
   position: fixed; /* or absolute, as you need */
   top: 0; 
   width: 200px ; /* that phone part s width */
   height: 30px ; /* same workaround */
   border-bottom-left-radius: 30px;
   border-bottom-right-radius: 30px; /* the magic, complete with actual radius of phone part corner */
}

it should keep good for this code:它应该对此代码保持良好状态：

<body>
    <div id=map>
        <div id=box></div>
    </div>
</body>

adding border-radius: 30px;添加边框半径：30px； on #page gives it the "phone" aspect在#page 上给它“电话”方面

Hope it helped:)希望它有所帮助:)

如何在元素 css 中透明元素

问题描述

2 个解决方案

解决方案1
2 已采纳 2020-04-08 11:01:26

解决方案2
0 2020-04-08 11:12:04

如何在元素 css 中透明元素

问题描述

2 个解决方案

解决方案1 2 已采纳 2020-04-08 11:01:26

解决方案2 0 2020-04-08 11:12:04

解决方案1
2 已采纳 2020-04-08 11:01:26

解决方案2
0 2020-04-08 11:12:04