英文:
How to create a polka dot texture with linear gradient as background in css?
问题
这是一个渐变背景：
body {
background: linear-gradient(to right, red , yellow);
}
这是斑点背景的 CSS：
body {
background-color: #94fcc8;
opacity: 1;
background-image: radial-gradient(#7c7c50 0.9500000000000001px, transparent 0.9500000000000001px), radial-gradient(#7c7c50 0.9500000000000001px, #94fcc8 0.9500000000000001px);
background-size: 38px 38px;
background-position: 0 0,19px 19px;
}
如何将它们合并在一起？
英文:
Here is a gradient background:
body {
background: linear-gradient(to right, red , yellow);
}
and here is the polka dot css:
body {
background-color: #94fcc8;
opacity: 1;
background-image: radial-gradient(#7c7c50 0.9500000000000001px, transparent 0.9500000000000001px), radial-gradient(#7c7c50 0.9500000000000001px, #94fcc8 0.9500000000000001px);
background-size: 38px 38px;
background-position: 0 0,19px 19px;
}
how do I somehow merge it together?
here is the codepen:
https://codepen.io/danichk/pen/YyVeXa
Thanks in advance.
答案1
得分: 1
翻译好的部分如下：
> background-image 接受逗号分隔的图像/渐变列表，background-.. 和 ..-blend-mode 属性也是如此。值的顺序很重要...
代码片段如下：
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-css -->
body {
background: 小麦色;
background-image: 径向渐变(鲑鱼 20%，透明 0), /* 圆点图案 */
径向渐变(鲑鱼 20%，透明 0),
线性渐变(向右, 红色, 黄色); /* 您的渐变 */
background-size: 30px 30px, /* 圆点图案 */
30px 30px,
100% 100%; /* 您的渐变 */
background-position: 0 0, 15px 15px;
/* 如果没有第三组值，第三个渐变将默认为第一组值 (0 0) */
}
<!-- end snippet -->
英文:
As commented
> background-image accepts a comma-delimited list of images/gradients, as do the background-.. and ..-blend-mode properties. Order of the values does matter...
snippet
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-css -->
body {
background: wheat;
background-image: radial-gradient(salmon 20%, transparent 0), /* polka dots */
radial-gradient(salmon 20%, transparent 0),
linear-gradient(to right, red , yellow); /* your gradient */
background-size: 30px 30px, /* polka dots */
30px 30px,
100% 100%; /* your gradient */
background-position: 0 0, 15px 15px;
/* Without a 3rd set of values, the 3rd gradient
will default to the first set of values (0 0) */
}
<!-- end snippet -->
答案2
得分: 0
html {
--g:/30px 30px 径向渐变(鲑鱼色 20%, #0000 0);
背景:
0 0 var(--g),15px 15px var(--g),
线性渐变(45度,红色,蓝色);
最小高度: 100%;
}
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
html {
--g:/30px 30px radial-gradient(salmon 20%, #0000 0);
background:
0 0 var(--g),15px 15px var(--g),
linear-gradient(45deg,red,blue);
min-height: 100%;
}
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论