html怎么用css插入背景图片(css如何设置背景图片)
首发

html怎么用css插入背景图片(css如何设置背景图片)

优质
好文 生活常识 49 0 生活常识网 生活达人 知名作者 优质生活领域作者 本文总共4729个字，预计阅读时间或需16分钟
    当前位置：
  1. 生活常识网
  2. 生活常识
请用语音读文章

背景图像可能是我们全部前端研究人员在我们的职业生涯中至少使用过几次的css属性之一。往往一般状态人认为背景图像不可能有所有不寻常的地方。但经历过研究。答案并非如此。所以本文获取了七个我认为最有用的技术。并创建了一些代码示例。

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;

}

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;

}

3.怎么样创建一个三角形的背景图像

另外一个很酷的背景特效只是三角形背景。当我们想展示某些完整不一样的选择（例如白天和黑夜或冬季和夏天）时。这种特效就更加棒。

思路是这样的。首先创建两个div。之后将两个背景都添加到之中。之后。第二个div使用clip-path属性画出三角形。

<body>

<div class="day"></div>

<div class="night"></div>

</body>

body {

margin: 0;

padding: 0;

}

div {

position: absolute;

height: 100vh;

width: 100vw;

}

.day {

background-image: url("images.unsplash.com/photo-14779…");

background-size: cover;

background-repeat: no-repeat;

}

.night {

background-image: url("images.unsplash.com/photo-14935…");

background-size: cover;

background-repeat: no-repeat;

clip-path: polygon(100vw 0, 0% 0vh, 100vw 100vh);

}

4.怎么样在背景图像上添加叠加渐变？

有时我们想在背景上添加一些文字。但一些图片太亮。导致字看不清楚。所以这里我们就需要让背景图叠加一些暗乐来出众文字效果。

例如。应该通过添加粉红橙色渐变或红色至透视渐变来增强日落图像。这些状态下使用叠加的渐变就很简无脑单做到。

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

}

5.怎么样创建一个颜色动态变化的背景

如果你很多颜色。你想确认哪种颜色更加的适合背景图片的颜色。刚动态更改背景颜色的技术就很有用。

@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("images.unsplash.com/photo-15593…");

}

25% {

background-image:

linear-gradient(4deg, rgba(213,49,127,0.3) 50%, rgba(213,49,127,0.3) 100%),

url("images.unsplash.com/photo-15593…");

}

50% {

background-image:

linear-gradient(4deg, rgba(36,182,255,0.3) 50%, rgba(36,182,255,1) 100%),

url("images.unsplash.com/photo-15593…");

}

100% {

background-image:

linear-gradient(4deg, rgba(0,255,254,0.3) 50%, rgba(0,255,254,0.3) 100%),

6. 怎么样生产网格背景图像？

一些时候会接触一些需要有艺术或者摄影类的项目。他们往往一般要求网址要有艺术消息。要有创意。网络的背景就挺有创意的。效果如下:

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('images.unsplash.com/photo-14998…');

background-repeat: no-repeat;

background-position: center;

background-attachment: fixed;

background-size: cover;

}

}

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('images.unsplash.com/photo-14998…');

background-repeat: no-repeat;

background-position: center;

background-attachment: fixed;

background-size: cover;

}

}

7.怎么样将背景图像设置为文本颜色？

使用background-image与background-clip。应该实现背景图像对文字的优美效果。 在某些状态下。它可能超级有用。尤其是当我们想创建一个较大的文本标题而又不如普通颜色那么枯燥的状态。

<body>

<h3>Hello world!</h3>

</body>

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;

}

h3 {

background-image: url("images.unsplash.com/photo-14622…");

background-clip: text;

-webkit-background-clip: text;

color: transparent;

以上就是由优质生活领域创作者 生活常识网 整理编辑的，如果觉得有帮助欢迎收藏转发~

分享到 :
电信大王卡哪些免流量(联通大王卡到底哪里划算)
上一篇 2022-03-19
好看的古言小说宠文有肉推荐(有啥好看的古言甜文推荐)
2022-03-19 下一篇
相关推荐
eclipse怎么重置窗口布局(当eclipse的布局乱了时)

eclipse怎么重置窗口布局(当eclipse的布局乱了时)

请用语音读文章1.eclipse取消默认工作空间的方法选择工具条上的widow–[&...

什么洗发露好用(用什么洗发水好)

什么洗发露好用(用什么洗发水好)

请用语音读文章超级不幸。我们日常的洗头发专用水。现在已经是外资品牌占了一大半市场份[...

香港富豪家族排名(福布斯亚洲50大富豪家族排行榜)

香港富豪家族排名(福布斯亚洲50大富豪家族排行榜)

请用语音读文章2021福布斯中国香港富豪榜　　1、李嘉诚　　2、李兆基　　3[&he...

澳门科技大学怎么样(聊一聊对澳门科技大学的各种质疑)

澳门科技大学怎么样(聊一聊对澳门科技大学的各种质疑)

请用语音读文章澳门21Fall硕士申请录取事件已经完成。正式落下了帷幕！根据近日澳[...

发表评论

您的电子邮箱地址不会被公开。

浏览器会保存昵称、邮箱和网站cookies信息，下次评论时使用。