英文:
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 gradientwill 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 -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论