7个关于 CSS backgroundImage 好用的技巧
1.背景图如何才能完美适配视口
让背景图适配视口很容易,需要使用下面 CSS 即可:
body {background-image: url('https://images.unsplash.com/photo-1573480813647-552e9b7b5394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2253&q=80');background-repeat: no-repeat;background-position: center;background-attachment: fixed;background-size: cover;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;
}
事例源码:https://codepen.io/duomly/pen...点击预览
2.如何在CSS中使用多个背景图片?
如果我想在背景中添加一张以上的图片怎么办?CSS3 中可以直接 指定多个背景路径,如下所示:
body {background-image: url(https://image.flaticon.com/icons/svg/748/748122.svg), url(https://images.unsplash.com/photo-1478719059408-592965723cbc?ixlib=rb-1.2.1&auto=format&fit=crop&w=2212&q=80);background-position: center, top;background-repeat: repeat, no-repeat;background-size: contain, cover;
}
事例源码:https://codepen.io/duomly/pen...点击预览
3.如何创建一个三角形的背景图像
另一个很酷的背景特效就是三角形背景,当我们想展示某些完全不同的选择(例如白天和黑夜或冬天和夏天)时,这种特效就更加棒。
思路是这样的,首先创建两个div
,然后将两个背景都添加到其中,然后,第二个div
使用clip-path
属性画出三角形。
html
<body><div class="day"></div><div class="night"></div>
</body>
css
body {margin: 0;padding: 0;
}div {position: absolute;height: 100vh;width: 100vw;
}.day {background-image: url("https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2613&q=80");background-size: cover;background-repeat: no-repeat;
}.night {background-image: url("https://images.unsplash.com/photo-1493540447904-49763eecf55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");background-size: cover;background-repeat: no-repeat;clip-path: polygon(100vw 0, 0% 0vh, 100vw 100vh);
}
源码:https://codepen.io/duomly/pen...点击预览
4.如何在背景图像上添加叠加渐变?
有时我们想在背景上添加一些文字,但有的图片太亮,导致字看不清楚,所以这里我们就需要让背景图叠加一些暗乐来突出文字效果。
例如,可以通过添加粉红橙色渐变或红色至透明渐变来增强日落图像,这些情况下使用叠加的渐变就很容易做到。
css
body {background-image: linear-gradient(4deg, rgba(38,8,31,0.75) 30%, rgba(213,49,127,0.3) 45%, rgba(232,120,12,0.3) 100%),url("https://images.unsplash.com/photo-1503803548695-c2a7b4a5b875?ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80");background-size: cover;background-repeat: no-repeat;background-attachment: fixed;background-position: center
}
源码:https://codepen.io/duomly/pen...点击预览
5.如何创建一个颜色动态变化的背景
如果你很多颜色,你想确认哪种颜色更适合背景图片的颜色,刚动态更改背景颜色的技巧就很有用。
css
HTML CSSResult
EDIT ON
@keyframes background-overlay-animation {0% {background-image: linear-gradient(4deg, rgba(255,78,36,0.3) 50%, rgba(255,78,36,0.3) 100%), url("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");}25% {background-image: linear-gradient(4deg, rgba(213,49,127,0.3) 50%, rgba(213,49,127,0.3) 100%), url("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");}50% {background-image: linear-gradient(4deg, rgba(36,182,255,0.3) 50%, rgba(36,182,255,1) 100%),url("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");}100% {background-image: linear-gradient(4deg, rgba(0,255,254,0.3) 50%, rgba(0,255,254,0.3) 100%),url("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");}
}@-webkit-keyframes background-overlay-animation {0% {background-image: linear-gradient(4deg, rgba(255,78,36,0.3) 50%, rgba(255,78,36,0.3) 100%)url("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");}25% {background-image: linear-gradient(4deg, rgba(213,49,127,0.3) 50%, rgba(213,49,127,0.3) 100%),url("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");}50% {background-image: linear-gradient(4deg, rgba(36,182,255,0.3) 50%, rgba(36,182,255,1) 100%),url("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");}100% {background-image: linear-gradient(4deg, rgba(0,255,254,0.3) 50%, rgba(0,255,254,0.3) 100%),
源码:https://codepen.io/duomly/pen...点击预览
大家都说简历没项目写,我就帮大家找了一个项目,还附赠【搭建教程】。
6. 如何制作网格背景图像?
有时候会遇到一些需要有艺术或者摄影类的项目,他们一般要求网站要有艺术信息,要有创意。网络的背景就挺有创意的,效果如下:
HTML
<body>
<div class="container"><div class="item_img"></div><div class="item"></div><div class="item_img"></div><div class="item"></div><div class="item"></div><div class="item_img"></div><div class="item"></div><div class="item_img"></div><div class="item"></div><div class="item"></div><div class="item_img"></div><div class="item"></div><div class="item_img"></div><div class="item"></div><div class="item_img"></div><div class="item"></div>
</div>
</body>
scss
body {margin: 0;padding: 0;
}.container {position: absolute;width: 100%;height: 100%;background: black;display: grid;grid-template-columns: 25fr 30fr 40fr 15fr;grid-template-rows: 20fr 45fr 5fr 30fr;grid-gap: 20px;.item_img {background-image: url('https://images.unsplash.com/photo-1499856871958-5b9627545d1a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2207&q=80');background-repeat: no-repeat;background-position: center;background-attachment: fixed;background-size: cover;
}
}
源码:https://codepen.io/duomly/pen...点击预览
7.如何将背景图像设置为文本颜色?
使用background-image
与 background-clip
,可以实现背景图像对文字的优美效果。 在某些情况下,它可能非常有用,尤其是当我们想创建一个较大的文本标题而又不如普通颜色那么枯燥的情况。
HTML
<body><h1>Hello world!</h1>
</body>
SCSS
body {display: flex;align-items: center;justify-content: center;flex-direction: column;width: 100%;text-align: center;min-height: 100vh;font-size: 120px;font-family:Arial, Helvetica, sans-serif;
}h1 {background-image: url("https://images.unsplash.com/photo-1462275646964-a0e3386b89fa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2600&q=80");background-clip: text;-webkit-background-clip: text;color: transparent;
}
源码:https://codepen.io/duomly/pen...点击预览
7个关于 CSS backgroundImage 好用的技巧相关推荐
- php background-image,css background-image属性怎么用
css background-image属性为元素设置背景图像,语法为:background-image:url(图片路径).设置的背景图像会占据元素的全部尺寸,包括内边距和边框,但不包括外边距. c ...
- jquery设置背景图片:$(this).css(background-image,url(on.jpg));就可以了
原文地址为: jquery设置背景图片:$(this).css("background-image","url(on.jpg)");就可以了 jquery设置背 ...
- 巧用CSS background-image属性制作图形背景
先看一张广告图,这是我们平时在浏览网页的时候,经常见到的一种文字广告设计,在文字周围绕着白色线条,我想大多数设计师可能就直接在ps中画一个png图片,再用css background-image 背景 ...
- java 自适应屏幕_自适应屏幕的CSS响应式布局设计技巧总结
摘要:这篇CSS教程栏目下的"自适应屏幕的CSS响应式布局设计技巧总结",介绍的技术点是"css响应式.响应式布局.响应式.自适应.CSS.设计",希望对大家开 ...
- css选择器顺序的小技巧
在线演示 本地下载 css的选择器的顺序其实很有意思,如果应用的好的话,可以做一些简单的逻辑出来,配合上css3,就可以尽可能的脱离js了. 这里的演示是一个带有hover事件的四张照片,效果来自一个 ...
- CSS垂直及水平居中小技巧
CSS垂直及水平居中小技巧 水平居中 margin法 flex法 效果 垂直居中 line-height法 flex法 效果 水平居中 margin法 html代码 <div class=&qu ...
- CSS入门六、常用技巧
零.文章目录 CSS入门六.常用技巧 1.精灵图 (1)为什么需要精灵图 一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大 ...
- CSS background-image
background-image 属性用于为一个元素设置一个或者多个背景图像 语法 每一个背景图片可以是关键字 none 或者 <image>. 如果指定多张背景图片, 就需要使用逗号 , ...
- css background-image 属性
background-image 属性是 CSS 的一个用于为元素设置背景图片的属性.语法如下: background-image: url(image.jpg); 其中 url(image.jpg) ...
最新文章
- LeetCode实战:快乐数
- 两阶段提交(Two-Phase Commit)
- SQL SERVER 2005 请求失败或服务未及时响应
- Git远程推送和抓取分支
- keras保存模型_onnx+tensorrt部署keras模型
- 接地脚是什么意思_帮个忙老铁们 急急急!!!什么叫相地接错并缺地。?_天涯问答_天涯社区...
- 【语义分割】全卷积网络(Fully Convolutional Networks, FCN)详解
- 算法之路(5)--括号匹配问题(Valid Parentheses)[leetcode]
- 1.swt/rap学习源码网址
- 全国各地车牌号码查询表
- U盘不识别量产工具解决方案
- 轮盘的基础,简单的实现和Toolbar的实现
- 刘汉国老师的3路单火智能开关
- 论数据库运维的全流程管控技术
- 360浏览器默认使用IE兼容模式解决办法
- Golang可视化工具——go-callvis
- oracle 文本转数字,Oracle:需要将数值转换为文本并保留 - 已解决
- 参考文献交叉引用的使用方法(word和wps)
- 一句话获取spring下所有注解
- Trinoo DDOS 攻击软件分析