我们可以通过设置background-repeat属性为no-repeat来防止图片重复。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Non-Repeating Background Image</title> <style> body { background-image: url('...
1.线性渐变 background-image: linear-gradient(方向, 颜色1, 范围1, 颜色2, 范围2...) background-image: repeating-linear-gradient() 重复线性渐变 2.径向渐变 background-image: radial-gradient(形状 大小 定位(中心点的位置), 颜色1, 范围1, 颜色2, 范围2...) 径向渐变 background-image: repeating...
background-image: linear-gradient(40deg, rgb(255 0 0) 60%, orange);/*Basic radial gradient examples*/background-image: radial-gradient(#ff8a00, #e52e71); background-image: radial-gradient(circle at top right, #ff8a00, red, #e52e71);/*Basic conic gradient examples*/background-image: ...
background-image:"厘米刻度背景",repeating-linear-gradient(90deg, $color-main0, $color-main2px, transparent0, transparent .5cm);background-size:"厘米刻度大小",100%20px; // 高度为20px AI代码助手复制代码 效果如下: 右边多出来一个刻度,所以背景的宽度不能为100%,得把它减掉(根据实际情况): back...
background-image: radial-gradient(50px 90px at center, red 20%,#000 50%,blue); /*渐变形状(像素或者关键字) 圆心位置 开始颜色,结束颜色*/ } 1. 2. 3. 4. 5. 6. 3.重复渐变(repeating) 重复线性渐变:background-image:repeating-linear-gradient(参数值); ...
background-image:url('example_img_girl.jpg'); } </style> Try it Yourself » To avoid the background image from repeating itself, set thebackground-repeatproperty tono-repeat. Example <style> body{ background-image:url('example_img_girl.jpg'); ...
background-repeat:repeat;background-size:100px 100px; 页面就会变成很多个100*100的小模块,而每个小模块里面,都会有一个50px灰-透明的背景,当然这是从左往右的设置,如果再加上一个从上往下的设置呢? image.png .grid-shi{height:100vh;background:linear-gradient(to right,#ccc 50px,transparent 50px),...
background-image:linear-gradient(to left,red,black); 渐变方向 background-image:linear-gradient(230deg,red,black); 渐变度数 background-image:linear-gradient(rgba(255,234,256,0.6)); 支持rgba background-image:repeating-linear-gradient(red 50px,blue 100px); 重复渐变 ...
background-image:linear-gradient(0.4turn, red, yellow); 因为圈数和角度之间可以相互转换,所以这里就不再进行赘述了 另外,渐变可以同时指定多个颜色,多个颜色默认情况下平均分布,也可以手动指定渐变的分布情况 repeating-linear-gradient()可以平铺的线性渐变 ...
background-image:repeating-linear-gradient(45deg,red10%,blue20%,orange30%); 2.径向渐变radial-gradient() 默认径向渐变的发散形状为椭圆 ellipse,设置为circle发散形状变为圆形 background-image: radial-gradient(circle, red 20%,white 20%); 改变径向渐变的发散点 ...