У меня есть записи в блогах, каждая с изображением обложки. Я хочу использовать эти изображения на своей странице списка сообщений в качестве эксперимента, чтобы увидеть, оживит ли она страницу немного.
Изображения слишком яркие. Я либо хочу уменьшить непрозрачность, либо добавить оверлей.
Изменение непрозрачности изменит непрозрачность текста. Добавление оверлея расположилось поверх якорей, что делает их бесполезными.
Я использую стартовый комплект Gatsby Casper, если вы заинтересованы.
PostListing.jsx
...
<PostFormatting className={className} key={title} cover={cover}>
<PostHeader>
<h2 className="post-title">
<Link to={path}>{title}</Link>
</h2>
...
PostFormatting.jsx
...
const style = cover ? { backgroundImage: `url(${cover})` } : {};
return <article className={className} style={style}>{children}</article>;
...
Сгенерированный HTML
<article class="post" style="background-image: url("https://picsum.photos/1280/500/?image=800");">
<header class="post-header">
<h2 class="post-title">
<a href="/blog/rewire-your-brain-7">Test Post</a>
</h2>
</header>
<section class="post-meta">
<span>
<span class="tag"><a href="/tags/mindset">Mindset</a></span>
<span class="tag"><a href="/tags/productivity">Productivity</a></span>
</span>
<time class="post-date" datetime="2017-06-27">27 June 2017</time>
</section>
<section class="post-excerpt"><p>...</p></section>
</article>
CSS
Все стили, которые у меня есть для элемента post.
<element.style> {
background-image: url(https://picsum.photos/1280/500/?image=800);
}
.home-template .content .post,
.tag-template .content .post {
background-color: rgba(0, 0, 0, .1);
padding: 30px 50px 50px 50px;
}
.post {
position: relative;
width: 80%;
max-width: 710px;
margin: 4rem auto 0em auto;
padding-bottom: 4rem;
border-bottom: #1a232c 3px solid;
word-wrap: break-word;
}
Я знаю о этом методе , но я не знаю, как получить изображение в псевдоэлементе after.
div {
width: 200px;
height: 200px;
display: block;
position: relative;
}
div::after {
content: "";
background: url(image.jpg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Примечание: попробуйте Радий для псевдо-классов