【发布时间】:2019-03-03 16:58:09
【问题描述】:
我正在尝试使我的<section> 标签上的背景具有响应性,由于某种原因,当我更改浏览器大小时它不会适应。我有冲突的代码吗?
@import url('https://fonts.googleapis.com/css?family=Questrial');
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
@keyframes breath {
0% {
background-size: 100% auto;
}
50% {
background-size: 140% auto;
}
100% {
background-size: 100% auto;
}
}
#bkg {
width: 100%;
height: 100%;
animation: breath 100s linear infinite;
}
section {
font-size: 35px;
text-align: center;
color: black;
font-weight: ;
font-family: 'Questrial', sans-serif;
}
hr {
border-top: 1px solid black;
}
html,
body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
.section {
position: relative;
background-size: cover;
background-repeat: no-repeat;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
<section style="background-image: url(img/bg.png); background-size: cover;"></section>
【问题讨论】:
-
删除 CSS 中
.section中的.,您需要引用该元素而不是名为section的 CSS 类 -
@Lawless 已经删除了,谢谢
标签: javascript html css background responsive