英文:
Fade background in media query for small screens in CSS
问题
我试图在左侧显示文本,右侧显示图像的简单页面上添加媒体查询,使图像淡化为背景,并在文本后面变得非常轻。我尝试添加线性渐变,但似乎一切都无法正常工作。我最初将图像设置为display: none
,以为我只需在后面再次添加它作为背景图像,因为CSS从上到下移动,但这只会使我的屏幕背景变为白色。然后我添加了这个线性渐变,虽然它在开发工具中显示出来,但没有生效,也没有被划掉或其他任何显示问题。
我尝试将home-img
设置为display: none
,然后在body
或section
中添加背景图像。
如您在第一张图中所见,它看起来很好。第二张图是我在代码上遇到问题的地方。我希望背景非常淡,以便您可以阅读文本。以下是我的代码片段。
HTML:
<section class="home">
<img
src="images/home-img.jpg"
class="home-img"
alt="穿着条纹衬衫坐在豆袋椅上在笔记本电脑上输入的男人"
/>
<div class="home-content">
<h1>您成功所需的一切。</h1>
<p>
我们使用战略性的创造力来区分我们的客户与竞争对手,让他们的信息脱颖而出,与观众建立联系并共鸣。
</p>
<a href="contact.html" class="btn">开始</a>
</div>
</section>
CSS:
section {
display: flex;
flex-direction: column;
height: 100vh;
align-items: center;
padding: 100px;
margin-top: 60px;
}
section.home {
flex-direction: row;
margin-top: 0;
}
.home-img {
position: absolute;
bottom: 0;
right: 0;
height: 110%;
}
@media (max-width: 995px) {
.logo {
top: 10px;
left: 40px;
font-size: 1.5rem;
}
section {
padding: 100px 40px;
}
.navigation ul li a {
font-size: 2rem;
}
section {
background-image: linear-gradient(
rgba(255, 255, 255, 0.561),
rgba(255, 255, 255, 0.561)
),
url(images/home-img.jpg);
background-size: cover;
}
}
@media (max-width: 680px) {
h1 {
font-size: 1.5rem;
margin-top: 150px;
}
.home-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
}
我尝试将home
图像设置为display: none
,然后使用线性渐变再次添加它作为背景图像。这使背景呈现为灰色,但没有应用图像。
英文:
I am trying to take this simple page with text on the left and an image on the right and add a media query so that the image fades to the background and becomes very light behind the text. I have tried adding linear gradients but nothing seems to be working. I set the image to display none at first thinking i would just add it again as a background image after since css moves from top to bottom but that just made my screen background white. Then I added this linear gradient which is not working at all although it is showing up in dev tools and not crossed out or anything.
I tried setting home-img to display none and then adding background image to body or section.
As you can see in the first image, it looks fine. The second is where I am having trouble with the code. I would like the background to be very light so you can read the text. Attached are my code snippets.
I tried editing home-img in the media query.<https://github.com/aloha-suzanne/propelagency>
HTML:
<section class="home">
<img
src="images/home-img.jpg"
class="home-img"
alt="man in striped shirt sitting on a bean bag chair while typing on his laptop"
/>
<div class="home-content">
<h1>Everything you need to succeed online.</h1>
<p>
We use strategic creativity to distinguish our clients from
competitors, let their message stand out, connect and resonate with
the audience.
</p>
<a href="contact.html" class="btn">Get started</a>
</div>
</section>
CSS:
section {
display: flex;
flex-direction: column;
height: 100vh;
align-items: center;
padding: 100px;
margin-top: 60px;
}
section.home {
flex-direction: row;
margin-top: 0;
}
.home-img {
position: absolute;
bottom: 0;
right: 0;
height: 110%;
}
@media (max-width: 995px) {
.logo {
top: 10px;
left: 40px;
font-size: 1.5rem;
}
section {
padding: 100px 40px;
}
.navigation ul li a {
font-size: 2rem;
}
section {
background-image: linear-gradient(
rgba(255, 255, 255, 0.561),
rgba(255, 255, 255, 0.561)
),
url(images/home-img.jpg);
background-size: cover;
}
}
@media (max-width: 680px) {
h1 {
font-size: 1.5rem;
margin-top: 150px;
}
.home-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
}
I've tried setting the home image to display: none and then adding it again as a background image with a linear gradient. That is making the background appear gray but not applying the image.
答案1
得分: 1
我认为你的线性渐变语法不太正确。这个渐变生成器 适用于创建有效的渐变。
section {
background: linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.9) 50%), url(https://images.pexels.com/photos/3277805/pexels-photo-3277805.jpeg);
background-size: cover;
width: 300px;
padding: 10em 1em 1em;
}
<section>
<h1>Everything you need to succeed online.</h1>
<p>
We use strategic creativity to distinguish our clients from
competitors, let their message stand out, connect and resonate with
the audience.
</p>
<p><a href="contact.html" class="btn">Get started</a></p>
</section>
英文:
I think your linear gradient syntax isn't quite correct. This gradient generator is excellent for creating gradients which work.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
section {
background: linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.9) 50%), url(https://images.pexels.com/photos/3277805/pexels-photo-3277805.jpeg);
background-size: cover;
width: 300px;
padding: 10em 1em 1em;
}
<!-- language: lang-html -->
<section>
<h1>Everything you need to succeed online.</h1>
<p>
We use strategic creativity to distinguish our clients from
competitors, let their message stand out, connect and resonate with
the audience.
</p>
<p><a href="contact.html" class="btn">Get started</a></p>
</section>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论