html - CSS - 即使在缩小网站格式后，如何让背景图片始终占据全宽？
问题描述
基本上我想做这样每当网站变小时，背景仍然应该是全宽的，我尝试了多种东西，但它没有用，我想知道如何做到这一点，因为我正在让我的网站响应 atm。所以是的，我想让我的网站响应，每当我尝试让网站变小时，它会在右侧打开，并且基本上会显示主体背景颜色，这不是我想要的，我希望图片仍然是全宽的，这个发生在 1595px 宽度之后。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link
href="https://fonts.googleapis.com/css?family=Chakra+Petch:300,300i,400,400i,500,500i,600,600i,700,700i|Orbitron:400,500,700,900&display=swap"
rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="/img/apexicon.jpg">
<link rel="stylesheet" href="/css/style.css">
<title>Apax</title>
</head>
<body>
<nav class="navigation">
<ul class="navigation-list">
<li class="navigation-item"><a href="#home" class="navigation-link">Home</a></li>
<li class="navigation-item"><a href="#legends" class="navigation-link">Legends</a></li>
<li class="navigation-item"><a href="#pros" class="navigation-link">Pros</a></li>
</ul>
</nav>
<header id="home" class="header">
<h1 class="heading-title">apex legends</h1>
<p class="heading-text">Fun. Easy. Joy.</p>
</header>
<section class="legends" id="legends">
<h1 class="legends-title">Legends</h1>
<div class="cards">
<div class="card">
<img src="/img/octane.jpg" alt="octane" class="card-picture">
<h1 class="card-title">Octane</h1>
<p class="card-text">One day, Octavio Silva was bored. In fact, he was bored most days. Heir to the
preoccupied CEOs of Silva Pharmaceuticals and wanting for nothing in life, he entertained himself by
performing death-defying stunts and posting holovids of them for his fans to gawk over. So, this
day, he decided to set the course record for a nearby Gauntlet by launching himself across the
finish line – using a grenade.</p>
</div>
<div class="card">
<img src="/img/wattson.jpg" alt="wattson" class="card-picture">
<h1 class="card-title">Wattson</h1>
<p class="card-text">Natalie Paquette is a familiar face in the Apex Games, though for a different reason than most. Daughter of the Games’ lead electrical engineer Luc Paquette, she studied his manuals to stay close to him, and discovered her calling at a young age. Though she could be completely distracted one moment and hyper-focused the next, electricity grounded her – its ordered, predictable flow made sense in a way the rest of the world didn’t.</p>
</div>
</div>
</section>
<section class="pros">
<h1 class="pros-title">Pros</h1>
<div id="pros" class="cards">
<div class="card">
<img src="/img/mendo.jpg" alt="octane" class="card-picture">
<h1 class="card-title">Mendu</h1>
<p class="card-text">Lucas “Mendokusaii” Håkansson is a full-time Twitch streamer. He is currently focusing on the battle royale genre including Apex Legends. Mendokusaii is currently the world record holder for most eliminations in a single game.</p>
</div>
<div class="card">
<img src="/img/shroud.jpg" alt="shroud" class="card-picture">
<h1 class="card-title">Shroud</h1>
<p class="card-text">Michael Grzesiek (born: June 2, 1994 [age 25]), better known online as Shroud, is a Canadian YouTuber, Twitch Streamer, and a professional eSports player and video game streamer. He is known for playing PUBG, Call of Duty: Black Ops 4 and Apex Legends. Shroud currently has 3.1 million subscribers and 280 million views on his YouTube channel along with 4.8 million Twitch followers and 235 million Twitch views, and is top 5 most followed streamers on Twitch</p>
</div>
</div>
</section>
<script src="/js/main.js"></script>
</body>
</html>
/* general styling */
* {
outline: none;
}
html {
font-size: 62.5%;
box-sizing: border-box;
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
font-family: 'Chakra Petch', sans-serif;
background-color: black;
}
/* navigation */
.navigation {
top: 0;
left: 0;
right: 0;
z-index: 1;
position: fixed;
}
.navigation-list {
display: flex;
flex-direction: row;
list-style: none;
justify-content: space-around;
flex: 1 1 1;
}
.navigation-link {
text-decoration: none;
font-size: 1.6rem;
color: rgb(105, 200, 200);
text-shadow: .1rem -.05rem .8rem rgb(9, 9, 41);
letter-spacing: .3rem;
font-weight: bold;
transition: all .4s;
}
.navigation-link:hover {
padding: .5rem;
background: linear-gradient(to right, aqua, blue, black);
border-radius: 3rem;
box-shadow: .05rem .4rem .3rem rgb(0, 0, 0);
transform: translate(0, 2) scale(1.5, 1.5);
}
.navigation-link:active {
box-shadow: 0;
padding: .3rem;
}
/* header */
.header {
background: linear-gradient(to right bottom, rgba(74, 173, 173, 0.561), rgba(0, 0, 0, 0.712), rgba(136, 32, 32, 0.589), rgba(0, 0, 0, 0.712), rgba(14, 14, 116, 0.561)), url(/img/apexbackground.jpg);
height: 100vh;
background-size: cover;
}
.heading-title {
position: absolute;
top: 20%;
font-size: 10rem;
font-weight: bold;
font-family: "Orbitron", sans-serif;
text-shadow: .1rem .3rem 1rem rgb(24, 14, 114);
color: rgb(26, 136, 99);
left: 27%;
letter-spacing: .3rem;
text-transform: uppercase;
}
.heading-text {
position: absolute;
top: 40%;
left: 43%;
font-size: 5rem;
color: rgb(17, 131, 116);
text-shadow: .1rem .1rem .5rem rgb(38, 174, 207);
letter-spacing: .2rem;
}
/* legends */
.legends {
height: 100vh;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.692), rgba(0, 255, 255, 0.685), rgba(0, 0, 255, 0.575), rgba(0, 0, 0, 0.815)), url(/img/apexlegendsbackground.jpg);
background-size: cover;
}
.legends-title {
position: absolute;
left: 48%;
top: 105%;
letter-spacing: .3rem;
text-transform: uppercase;
font-size: 2rem;
text-shadow: .1rem .1rem .5rem black;
color: darkblue;
background: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 255, 255, 0.596), rgba(173, 216, 230, 0.616), rgba(255, 255, 255, 0.63), rgba(0, 0, 139, 0.609), rgb(0, 0, 0));
padding: .5rem;
border-radius: 1.5rem;
}
/* cards */
.cards {
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex: 1 1 1;
justify-content: space-evenly;
}
.card {
height: 48rem;
position: relative;
margin-top: 30rem;
width: 50rem;
box-shadow: .1rem .7rem .5rem black;
background: rgba(0, 0, 0, 0.719);
transition: all .5s;
}
.card-picture {
width: 25rem;
position: relative;
margin-top: 2rem;
border-radius: 1rem;
box-shadow: .05rem .8rem .5rem black;
left: 25%;
background-size: cover;
}
.card-title {
font-size: 2rem;
text-shadow: .1rem .5rem 1rem white;
left: 40%;
text-transform: uppercase;
font-weight: bold;
font-family: "Orbitron", sans-serif;
position: relative;
}
.card-text {
font-size: 1.2rem;
text-shadow: .1rem .3rem 1rem rgb(255, 255, 255);
text-transform: uppercase;
padding: 0 .4rem;
color: rgb(0, 0, 0);
letter-spacing: .3rem;
text-align-last: center;
text-align: center;
font-weight: bold;
font-family: "Orbitron", sans-serif;
line-height: 1.5rem;
}
.card:hover {
box-shadow: .05rem -.02rem 2rem black;
transform: translate(.4rem, -2rem) scale(1, 1);
background: linear-gradient(to bottom right, rgba(218, 178, 104, 0.596), rgba(172, 107, 4, 0.575),
rgba(77, 11, 5, 0.705))
}
/* pros */
.pros {
height: 100vh;
background: linear-gradient(to top left, rgba(0, 0, 0, 0.93), rgba(0, 0, 0, 0.216), rgba(0, 0, 0, 0.637), rgba(0, 0, 0, 0.63)), url(/img/prosbackground.jpg);
background-size: cover;
}
.pros-title {
position: absolute;
left: 48%;
top: 205%;
letter-spacing: .3rem;
text-transform: uppercase;
font-size: 2rem;
text-shadow: .1rem .1rem .5rem black;
color: darkblue;
background: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 255, 255, 0.596), rgba(173, 216, 230, 0.616), rgba(255, 255, 255, 0.63), rgba(0, 0, 139, 0.609), rgb(0, 0, 0));
padding: .5rem;
border-radius: 1.5rem;
}
/* responsiveness */
@media (max-width: 1595px) {
.header, .pros, .legends {
background-size: cover;
height: 100vh;
width: 100%;
margin: 0;
}
}
解决方案
我没有在你的代码中找到你想要放置背景的任何地方，但如果它是 CSS 尝试使用background-size: cover;
推荐阅读
- java - List 中所有对角线元素的总和
- python - 访问 DataFrameGroupBy 组（用于将它们传递给绘图）
- powerbi - 需要 Power BI 许可证
- javascript - 请使用动态数据帮助 react-pdf/renderer PDFViewer
- spring-kafka - Trace 和 Span 信息默认丢失 SeekToCurrentErrorHandler
- android - Kotlin 协程不等待网络结果返回
- javascript - 如何将 Javascript 字符串转换为对象引用
- javascript - 为什么时刻 js 从索引 0 开始的月份？
- php - 无法设置 SameSite=None PHP 7.4 无错误无警告
- salesforce - LWC 中的自定义轮播