时间戳

首页 > 解决方案 > CSS中的背景图像调整

html - CSS中的背景图像调整

问题描述

#home::before
{
    content: "";
    position: absolute;
    background: url(1a.jpg) no-repeat center center/cover;
    /* opacity: 1; */
    height: 100%;
    width: 100%;
    z-index: -1;
    filter: blur(1.5px);
}

这是我的代码，但我只想包含图像的特定部分以覆盖整个背景..任何建议/

标签： htmlcss

解决方案

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cakes by nandani</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Allura&display=swap" rel="stylesheet">
</head>

<body>
    <nav id="navbar">
        <div id="leftpor">
            <ul>
                <li class="items"><a href="#">Home</a></li>
                <li class="items"><a href="#">About us</a></li>
                <li class="items"><a href="#">Items</a></li>
            </ul>
        </div>
        <!-- <div id="logo"><img src="logo.png" alt="Cakes by nandani"></div> -->
        <div id="rightpor">
            <ul>
                <li class="items"><a href="#">Contact</a></li>
                <li class="items"><a href="#">Gallery</a></li>
                <li class="items"><a href="#">Our Story</a></li>
            </ul>
        </div>
    </nav>
    <section id="home">
        <a class="Brand center"> Cakes By Nandani</a>
        <a class="Tag center"> Many Emotiions One delight</a>
        
        <button class="btn">Order Now</button>
    </section>



     <section id="services-container">
         <h1 class="hprimary center">Our services</h1>
         <div id="services">
             <div class="box">
             <img src="Oreo.jpg" alt="">
            <p class="center">Oreo</p>
        </div>
        <div class="box">
            <img src="Oreo.jpg" alt="">
           <p class="center">Oreo</p>
       </div>
       <div class="box">
        <img src="Oreo.jpg" alt="">
       <p class="center">Oreo</p>
   </div>
         </div>
     </section>
</body>

</html>

    enter code here



only some part of image is cropped and used ....how to stop that

推荐阅读