#html #css
Вопрос:
Итак, это мой код, я пытаюсь настроить ширину
.feature2::перед { содержимое: url(./media/изображение-компьютер.png/500/100);
}
как вы можете видеть, я пытался настроить ширину с помощью 500/100 внутри контейнера, но теперь мое изображение исчезло, я также пытался настроить ширину, используя свойство width и height обычно, но это не работает, пожалуйста, помогите.
вот как это выглядит https://imgur.com/YPTelhD
@import url("https://fonts.googleapis.com/css2?family=Bai Jamjuree:wght@400;600amp;display=swap");
* {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
body {
height: 100vh;
font-family: "Bai Jamjuree", sans-serif;
display: flex;
font-size: 18px;
}
.primary {
color: #4a4f53;
}
.neutral {
color: #b3b7b8;
}
.container {
background: url(./media/bg-header-mobile.png) no-repeat top;
background-size: contain;
width: 23.438rem;
height: 325.313rem;
border: 1px red solid;
margin: 0 auto;
padding: 9.375rem 2rem;
}
.main_logo {
opacity: 70%;
width: 8.5rem;
margin-top: 1.59rem;
}
.main_heading {
font-size: 1.9rem;
line-height: 1.35;
margin-top: 3.5rem;
width: 100%;
margin-bottom: 1.8rem;
}
.main_content {
margin-bottom: 3.5rem;
}
.button {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
text-align: center;
}
.ios {
background: #26bba5;
color: white;
font-size: 700;
padding: 15px 10px;
border-radius: 50px;
border-bottom: 3px #219f8a solid;
box-shadow: 0 2px 10px #26bba5;
margin-bottom: 1.5rem;
}
.mac {
background: #6174ff;
color: white;
font-size: 700;
padding: 15px 10px;
border-radius: 50px;
border-bottom: 3px #4f62da solid;
box-shadow: 0 2px 5px #6174ff;
}
.feature1 {
margin-top: 12rem;
}
.feature1_dis {
margin-top: 1.8rem;
}
.feature2::before {
content: url(./media/image-computer.png/500/100);
} <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=default-width, initial-scale=1">
<meta charset="UTF-8">
<meta lang="en">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<header>
<img src="media/logo.svg" class="main_logo"/>
<h1 class="main_heading primary">
A history of everything you copy
</h1>
<article class="main_content neutral">Clipbord allows you to track and organize everything you copy instantly access your clipboard on all your devices.</article>
<div class="button">
<botton class="ios">
Download for iOS
</botton>
<botton class="mac">
Download for Mac
</botton>
</div>
</header>
<main>
<div></div>
<section class="features">
<h1 class="feature1 primary">Keep track of your snippets</h1>
<article class="feature1_dis neutral">Clipboard instantly stores any items you copy in the cloud, meaning you can access your snippets immediately on all your devices. Our Mac and iOS apps will help you organize everything.</article>
<h1 class="feature2 primary">
Quick Search
</h1>
<article class="feature2_dis neutral">
Easily search your snippets by content, category, web address, application, and more.
</article>
<h1 class="feature3 primary">
iCloud Sync
</h1>
<article class="feature3_dis neutral">
Instantly saves and syncs snippets across all your devices.
</article>
<h1 class="feature4 primary">
Complete History
</h1>
<article class="feature4_dis neutral">
Retrieve any snippets from the first moment you started using the app.
</article>
<h1 class="feature5 primary">
Access Clipboard Anywhere
</h1>
<aritical class="feature5_dis neutral">
Whether you're on the go, or at your computer, you can access all your Clipboard snippets in a few simple clicks.
</aritical>
<h1 class="feature6 primary">
Supercharge your workflow
</h1>
<article class="feature6_dis neutral">
We've got the tools to boost your produtivity.
</article>
<h1 class="feature7 primary">
Create blacklists
</h1>
<article class="feature7_dis neutral">
Ensure sensitive information never makes its way to your clipboard by excluding certain sources.
</article>
<h1 class="feature8 primary">
Plain text snippets
</h1>
<article class="feature8_dis neutral">
Remove unwanted formatting from copied text for a consistent look.
</article>
<h1 class="feature9 primary">
Sneak preview
</h1>
<article class="feature9_dis neutral">
Quick preview of all snippets on your Clipboard for easy access.
</article>
</section>
<div class="companies">
<ul class="comp">
<li class="com">
<a href="google.com">
<img class="white"src="./media/logo-google.png" alt="google.com">
</a>
</li>
<li class="com">
<a href="IBM.com">
<img class="white"src="./media/logo-ibm.png" alt="IBM.com">
</a>
</li>
<li class="com">
<a href="Microsoft.com">
<img class="white"src="./media/logo-microsoft.png" alt="Microsoft.com">
</a>
</li>
<li class="com">
<a href="https://www.hpe.com/us/en/home.html">
<img class="white"src="./media/logo-hp.png" alt="https://www.hpe.com/us/en/home.html">
</a>
</li>
<li class"com">
<a href="https://en.wikipedia.org/wiki/Vector_graphics">
<img class="white" src="./media/logo-vector-graphics.png" alt="vector graphics">
</a>
</li>
</ul>
</div>
<div class="lower_section">
<section class="lower_section">
<h1 class="lower_heading primary">Clipboard for iOS and Mac OS</h1>
<article class="lower_content neutral">
Available for free on the App Store Download for Mac or iOS, sync with iCloud and you're ready to start adding to your clipboard.
</article>
<div class="button">
<botton class="ios">
Download for iOS
</botton>
<botton class="mac">
Download for Mac
</botton>
</div>
</section>
</div>
</main>
<footer>
<div class="foot">
<img src="media/logo.svg"
alt="logo">
<nav class="navigation_bar">
<ul class="nav_list">
<li class="items">FAQs</li>
<li class="items">Contact Us</li>
<li class="items">Privacy Policy</li>
<li class="items">Press Kit</li>
<li class="items">Install Guide </li>
</ul>
</nav>
</div>
<div class="media">
<ul class="media-list">
<li class="media_items primary">
<a href="facebook.com">
<img src="./media/icon-facebook.svg" alt="facebook_icon">
</a>
</li>
<li class="media_items primary">
<a href="twitter.com">
<img src="./media/icon-twitter.svg" alt="twitter-icon">
</a>
</li>
<li class="media_items primary">
<a href="instagram.com">
<img src="./media/icon-instagram.svg" alt="instagram-icon">
</a>
</li>
</ul>
</div>
</footer>
</div>
</body>
</html> Комментарии:
1. Пожалуйста, подумайте о добавлении HTML.
2. @WalidSiddik проверьте сейчас
Ответ №1:
Что вы могли бы подумать о том , чтобы вместо добавления URL content -адреса изображения использовать background-image вместо этого. Вы можете установить ширину и высоту так, как вы хотите. Установка background-size: cover; обеспечит использование всего пространства.
.feature2::before {
content: "";
display: block;
width: 100%;
height: 200px;
background-size: cover;
background-image: url(https://imagecdn.app/v1/images/https://images.unsplash.com/photo-1525923838299-2312b60f6d69?width=300amp;height=200);
}
@import url("https://fonts.googleapis.com/css2?family=Bai Jamjuree:wght@400;600amp;display=swap");
* {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
body {
height: 100vh;
font-family: "Bai Jamjuree", sans-serif;
display: flex;
font-size: 18px;
}
.primary {
color: #4a4f53;
}
.neutral {
color: #b3b7b8;
}
.container {
background: url(./media/bg-header-mobile.png) no-repeat top;
background-size: contain;
width: 23.438rem;
height: 325.313rem;
border: 1px red solid;
margin: 0 auto;
padding: 9.375rem 2rem;
}
.main_logo {
opacity: 70%;
width: 8.5rem;
margin-top: 1.59rem;
}
.main_heading {
font-size: 1.9rem;
line-height: 1.35;
margin-top: 3.5rem;
width: 100%;
margin-bottom: 1.8rem;
}
.main_content {
margin-bottom: 3.5rem;
}
.button {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
text-align: center;
}
.ios {
background: #26bba5;
color: white;
font-size: 700;
padding: 15px 10px;
border-radius: 50px;
border-bottom: 3px #219f8a solid;
box-shadow: 0 2px 10px #26bba5;
margin-bottom: 1.5rem;
}
.mac {
background: #6174ff;
color: white;
font-size: 700;
padding: 15px 10px;
border-radius: 50px;
border-bottom: 3px #4f62da solid;
box-shadow: 0 2px 5px #6174ff;
}
.feature1 {
margin-top: 12rem;
}
.feature1_dis {
margin-top: 1.8rem;
}
.feature2 {
margin: 3rem 0;
}
.feature2::before {
content: "";
display: block;
width: 250px;
height: 160px;
background-size: cover;
background-image: url(https://imagecdn.app/v1/images/https://images.unsplash.com/photo-1525923838299-2312b60f6d69?width=300amp;height=200);
max-width: 100%;
margin: 0 auto;
} <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=default-width, initial-scale=1">
<meta charset="UTF-8">
<meta lang="en">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<header>
<img src="media/logo.svg" class="main_logo"/>
<h1 class="main_heading primary">
A history of everything you copy
</h1>
<article class="main_content neutral">Clipbord allows you to track and organize everything you copy instantly access your clipboard on all your devices.</article>
<div class="button">
<botton class="ios">
Download for iOS
</botton>
<botton class="mac">
Download for Mac
</botton>
</div>
</header>
<main>
<div></div>
<section class="features">
<h1 class="feature1 primary">Keep track of your snippets</h1>
<article class="feature1_dis neutral">Clipboard instantly stores any items you copy in the cloud, meaning you can access your snippets immediately on all your devices. Our Mac and iOS apps will help you organize everything.</article>
<h1 class="feature2 primary">
Quick Search
</h1>
<article class="feature2_dis neutral">
Easily search your snippets by content, category, web address, application, and more.
</article>
<h1 class="feature3 primary">
iCloud Sync
</h1>
<article class="feature3_dis neutral">
Instantly saves and syncs snippets across all your devices.
</article>
<h1 class="feature4 primary">
Complete History
</h1>
<article class="feature4_dis neutral">
Retrieve any snippets from the first moment you started using the app.
</article>
<h1 class="feature5 primary">
Access Clipboard Anywhere
</h1>
<aritical class="feature5_dis neutral">
Whether you're on the go, or at your computer, you can access all your Clipboard snippets in a few simple clicks.
</aritical>
<h1 class="feature6 primary">
Supercharge your workflow
</h1>
<article class="feature6_dis neutral">
We've got the tools to boost your produtivity.
</article>
<h1 class="feature7 primary">
Create blacklists
</h1>
<article class="feature7_dis neutral">
Ensure sensitive information never makes its way to your clipboard by excluding certain sources.
</article>
<h1 class="feature8 primary">
Plain text snippets
</h1>
<article class="feature8_dis neutral">
Remove unwanted formatting from copied text for a consistent look.
</article>
<h1 class="feature9 primary">
Sneak preview
</h1>
<article class="feature9_dis neutral">
Quick preview of all snippets on your Clipboard for easy access.
</article>
</section>
<div class="companies">
<ul class="comp">
<li class="com">
<a href="google.com">
<img class="white"src="./media/logo-google.png" alt="google.com">
</a>
</li>
<li class="com">
<a href="IBM.com">
<img class="white"src="./media/logo-ibm.png" alt="IBM.com">
</a>
</li>
<li class="com">
<a href="Microsoft.com">
<img class="white"src="./media/logo-microsoft.png" alt="Microsoft.com">
</a>
</li>
<li class="com">
<a href="https://www.hpe.com/us/en/home.html">
<img class="white"src="./media/logo-hp.png" alt="https://www.hpe.com/us/en/home.html">
</a>
</li>
<li class"com">
<a href="https://en.wikipedia.org/wiki/Vector_graphics">
<img class="white" src="./media/logo-vector-graphics.png" alt="vector graphics">
</a>
</li>
</ul>
</div>
<div class="lower_section">
<section class="lower_section">
<h1 class="lower_heading primary">Clipboard for iOS and Mac OS</h1>
<article class="lower_content neutral">
Available for free on the App Store Download for Mac or iOS, sync with iCloud and you're ready to start adding to your clipboard.
</article>
<div class="button">
<botton class="ios">
Download for iOS
</botton>
<botton class="mac">
Download for Mac
</botton>
</div>
</section>
</div>
</main>
<footer>
<div class="foot">
<img src="media/logo.svg"
alt="logo">
<nav class="navigation_bar">
<ul class="nav_list">
<li class="items">FAQs</li>
<li class="items">Contact Us</li>
<li class="items">Privacy Policy</li>
<li class="items">Press Kit</li>
<li class="items">Install Guide </li>
</ul>
</nav>
</div>
<div class="media">
<ul class="media-list">
<li class="media_items primary">
<a href="facebook.com">
<img src="./media/icon-facebook.svg" alt="facebook_icon">
</a>
</li>
<li class="media_items primary">
<a href="twitter.com">
<img src="./media/icon-twitter.svg" alt="twitter-icon">
</a>
</li>
<li class="media_items primary">
<a href="instagram.com">
<img src="./media/icon-instagram.svg" alt="instagram-icon">
</a>
</li>
</ul>
</div>
</footer>
</div>
</body>
</html>