gpt4 book ai didi

html - handle 盒的 CSS 背景图案

转载 作者:行者123 更新时间:2023-12-01 22:17:53 26 4
gpt4 key购买 nike

我想使用 CSS 创建一个“抓地力”背景,用于指示元素是可拖动的。 (参见 https://ux.stackexchange.com/a/34639/39138)

目前我有一个元素的 dnd 类,CSS 看起来像:

.dnd {
background: #99bbee; /* would like to be able to change this dynamically */
padding: 1em;
margin: 2em;
border-radius: 0.25em;
width: 14em;
transition: all 0.25s;
}
.dnd:hover {
box-shadow: 0.25em 0.25em 0.3em rgba(0,0,0,0.2);
margin: 1.75em 2.1em 2.25em 1.9em;
cursor: move; /* fallback if grab cursor is unsupported */
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
.dnd:active {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
.dnd::before { /* the grip */
content: " ";
display: inline-block;
width: 1.5em;
height: 2em;
margin: -0.5em 0.75em -0.5em -0.5em;

background-color: transparent;
background-size: 0.5em 0.5em;
background-position: 0 0;
/* Background image - unfortunately requires background color */
background-image:
-webkit-linear-gradient(#99bbee 50%, transparent 50%),
-webkit-linear-gradient(left, rgba(0,0,0,0.2) 50%, transparent 50%);
background-image:
-moz-linear-gradient(#99bbee 50%, transparent 50%),
-moz-linear-gradient(left, rgba(0,0,0,0.2) 50%, transparent 50%);
background-image:
-o-linear-gradient(#99bbee 50%, transparent 50%),
-o-linear-gradient(left, rgba(0,0,0,0.2) 50%, transparent 50%);
background-image:
linear-gradient(#99bbee 50%, transparent 50%),
linear-gradient(to right, rgba(0,0,0,0.2) 50%, transparent 50%);
}

...这可以在 handle 上创建一些框作为背景,但我不想让 handle 伪元素依赖于硬编码的背景颜色(在本例中 #99bbee; 它可以使用 rgba(0,0,0,0.2))。有没有办法重写这个 CSS 背景图像,使其更灵活 w/r/t 背景颜色?

这是一个 jsfiddle:https://jsfiddle.net/luken/r69wfwjd/5/


2021 编辑: CSS Variables现在得到广泛支持,因此它们可能是最佳解决方案。

最佳答案

我认为最好的选择可能是 SVG 图像背景。

事实上,如果你看一下 stackoverflow 自己的 grip to expand the textarea (.grippie) 在写答案时,它使用了一个 SVG background .

所以想法是将 css background 属性与 url(...)data uri 一起使用作为网址。

SVG代码取自here .

.grip {
background-size: cover;
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSIjODg4Ij48L3JlY3Q+Cjwvc3ZnPg==");
width: 10px;
height: 15px;
cursor: grab;
cursor: -webkit-grab;
margin: 0.5em;
}

.container {
display: flex;
align-items: center;
}
<div class="container" draggable="true">
<div class="grip"></div>
<div class="content">A thing with a grip</div>
</div>
<div class="container" draggable="true">
<div class="grip"></div>
<div class="content">A thing with a grip</div>
</div>

关于html - handle 盒的 CSS 背景图案,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43211648/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com