我想设置一个图像作为整个页面的背景,但也希望使用CSS控制其不透明度,而不影响内容的不透明度.有可能吗?如果有,我该怎么做?
目前,我所做的是使用html标记将图像设置为背景,但由于这一点,当我更改不透明度时,内容也会受到影响.
html {
background: url(https://picsum.photos/400/400);
/* This image is used as an example */
background-size: cover;
background-repeat: no-repeat;
opacity: 0.5
/* Changing opacity like this also changes it for the whole content because html tag is used */
}
<h1>This is a heading</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A possimus, odio iusto libero cupiditate soluta minima quis in, officiis quod, quia laudantium deserunt veniam neque alias facere ipsam. Neque modi, atque animi pariatur reprehenderit nesciunt possimus, perspiciatis distinctio, earum corporis ipsam illo impedit maxime doloremque ad quod temporibus laboriosam quasi?</p>
<h1>This is a heading</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A possimus, odio iusto libero cupiditate soluta minima quis in, officiis quod, quia laudantium deserunt veniam neque alias facere ipsam. Neque modi, atque animi pariatur reprehenderit nesciunt possimus, perspiciatis distinctio, earum corporis ipsam illo impedit maxime doloremque ad quod temporibus laboriosam quasi?</p>
<h1>This is a heading</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A possimus, odio iusto libero cupiditate soluta minima quis in, officiis quod, quia laudantium deserunt veniam neque alias facere ipsam. Neque modi, atque animi pariatur reprehenderit nesciunt possimus, perspiciatis distinctio, earum corporis ipsam illo impedit maxime doloremque ad quod temporibus laboriosam quasi?</p>