相关疑难解决方法(0)
是否可以将伪元素的堆叠顺序设置在其父元素下面？
我试图用:after伪元素CSS选择器设置元素的样式
#element {
position: relative;
z-index: 1;
}
#element::after {
position:relative;
z-index: 0;
content: " ";
position: absolute;
width: 100px;
height: 100px;
}
看起来::after元素不能低于元素本身.
有没有办法让伪元素低于元素本身？
270
推荐指数
推荐指数
7
解决办法
解决办法
21万
查看次数
查看次数
在线性渐变上使用背景位置的百分比值
有没有办法background-position取出百分比值？目前我的按钮仅适用于一个明确的价值观width和background-position.
body {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.button {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
color: white;
font-weight: bold;
width: 350px;
height: 50px;
border: 1px solid green;
transition: background 0.5s;
background-repeat: no-repeat;
background-image: linear-gradient(to left, #2484c6, #1995c8 51%, #00bbce), linear-gradient(to right, #2484c6 0%, #1995c8 51%, #00bbce 76%);
}
.button-pixel {
background-position: -350px 0px, 0px 0px;
}
.button-pixel:hover {
background-position: 0px 0px, 350px 0px;
}
.button-percentage …12
推荐指数
推荐指数
1
解决办法
解决办法
1634
查看次数
查看次数
裁剪画布中显示的图像
我有一个画布标签:
<canvas width="321" height="240" id="img_source"></canvas>
我想添加裁剪功能,所以我制作了一个可调整大小的div,可以通过使用鼠标拖动div的角来识别裁剪图像的边框.它看起来像下图:
我目前正在使用"toDataURL()"将数据从画布转换为可由<img>标签显示的图像.我的问题是,如何将图像转换为仅由可调整大小的div识别的画布的一部分？
5
推荐指数
推荐指数
2
解决办法
解决办法
1万
查看次数
查看次数
如何更改div元素的背景颜色以与主体背景颜色匹配？
在线性渐变背景中，我创建了一个圆圈，并在其中创建了一个小方块。圆具有淡蓝色，正方形应具有主体的线性渐变，但是问题是div元素的线性渐变的位置与主体背景不匹配。
我尝试background:inherit使用div元素，但渐变与主体不匹配。
body {
background: linear-gradient(45deg, yellow, green);
background-size: 400% 400%;
}
.circle {
height: 150px;
width: 150px;
border-radius: 50%;
position: relative;
margin: auto;
background: dodgerblue;
}
.square {
height: 50px;
width: 50px;
transform: translate(250px, -100px);
background: inherit;
}<body>
<div class="circle"></div>
<div class="square"></div>
</body>
5
推荐指数
推荐指数
1
解决办法
解决办法
110
查看次数
查看次数
如何使子div透明？
假设有一个div，说“ parent-div ”。父div具有背景色。如果子div“ child-div ”需要设置为透明背景，而其设置为祖父母div的背景图像且类名为“ wrapper ”，该怎么办？
我知道子div可以从父div继承css属性，但是如何将背景设置为透明，使整个图片看起来像父div上有孔？
.wrapper{
background-image: url('http://media.istockphoto.com/photos/medium-golden-brown-wood-texture-background-picture-id513694258?k=6&m=513694258&s=170667a&w=0&h=xETakP7VjpAtRj9e6rJRYNqw_AJLZ9ovLlC4ebR5BOQ=');
}
.parent-div{
width: 100px;
height: 100px;
background: #ff0000;
padding: 10px;
margin: auto;
}
.child-div{
width: 60%;
height: 60%;
margin: auto;
background: transparent;
border: 1px solid;
}<div class="wrapper">
<div class="parent-div">
<div class="child-div">
</div>
</div>
</div>
2
推荐指数
推荐指数
1
解决办法
解决办法
574
查看次数
查看次数
标签 统计
css ×5
html ×3
css3 ×2
background ×1
canvas ×1
javascript ×1
jquery ×1
nested ×1
transparency ×1
z-index ×1