欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

如何在CSS中分割圖像的背景和顏色？

CSS
錢衛國2年前9瀏覽0評論

我正在嘗試將圖像的背景和顏色分開。 這是當前的設置，但每次我調整手機的背景時，它都會把圖片推過來，讓它看起來被拉伸了。

* {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
  font-size: 14px;
}

body {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow-x: hidden;
  background-image: url(https://picsum.photos/2000);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: right;
  background-size: 65vw 100vh;
  flex-direction: column;
  background-color: teal;
  max-width: 100%;
}

nav {
  display: flex;
  justify-content: space-between;
  padding: 20px 10px;
  height: 60px;
}

ul {
  display: flex;
  list-style: none;
  align-items: center;
}

li {
  text-align: center;
  padding: 14px 12px;
}

a {
  text-decoration: none;
  color: black;
  font-family: 'Cherry Bomb One', cursive;
  font-weight: bolder;
}

.logo {
  font-family: 'Permanent Marker', cursive;
  color: black;
  font-size: 30px;
}

.sign-up {
  height: 46px;
  background-color: white;
  border-radius: 50px;
  margin-left: 15px;
}

.log-in {
  height: 46px;
  background-color: black;
  border-radius: 50px;
}

.login {
  color: white;
}

.search {
  display: flex;
  height: 70vh;
  margin: 0 0 20px 30px;
  justify-content: center;
  flex-direction: column;
}

p {
  font-size: 50px;
  font-family: 'Nunito', sans-serif;
  margin-bottom: 40px;
}

input {
  width: 350px;
  height: 45px;
  border-radius: 45px;
  padding: 5px 0 5px 10px;
  margin-bottom: 20px;
}

button {
  height: 50px;
  width: 100px;
  margin-left: 10px;
  border-radius: 10px;
  background-color: white;
}

.button {
  background-color: black;
  color: white;
}

button:hover {
  cursor: pointer;
  background-color: rgb(191, 191, 191);
}

.button:hover {
  background-color: #4C4646;
}

.sign-in-link {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}

.sign-link {
  text-decoration: underline;
  font-weight: normal;
}

@media all and (max-width: 600px) {
  button {
    margin-top: 10px;
  }
}

<!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" />
  <link rel="preconnect" >
  <link rel="preconnect"  crossorigin>
  <link rel="preconnect" >
  <link rel="preconnect"  crossorigin>
  <link  rel="stylesheet">
  <link  rel="stylesheet">
  <link rel="stylesheet" href="styles.css">
  <title>Food To You</title>
</head>

<body>
  <header>
    <nav>
      <ul>
        <li><a href="#" class="logo">Food To You</a></li>
      </ul>
      <ul>
        <div class="log-in">
          <li><a class="login" href="#">Log in</a></li>
        </div>
        <div class="sign-up">
          <li><a href="#">Sign up</a></li>
        </div>
      </ul>
    </nav>
  </header>

  <div class="search">
    <p class="search-header">Order food to your door</p>
    <form action="">
      <input type="text" placeholder="Enter delivery address">
      <button type="button">Deliver now</button>
      <button type="button" class="button">Find Food</button>
      <p class="sign-in-link"><a class="sign-link" href="#">Sign In</a> for your recent adress</p>
    </form>
  </div>

</html>

您可以堆疊背景圖像，并且可以使用CSS漸變作為背景圖像。所以只需要在你的照片前面放置一個漸變，左邊的漸變是不透明的，這樣你的照片是純色的，然后右邊的漸變是透明的，這樣下面的照片就可以看到了。

body {
  height: 100vh;
  background-image: linear-gradient(90deg, rgb(0,128,128,1) 35%, rgb(0,128,128,0) 35%), url(https://picsum.photos/2000);
  background-size: cover;
}