如何在CSS中分割图像的背景和颜色？

我正在尝试分割图像的背景和颜色。这是目前的设置，它看起来如何，但每次我调整背景的移动的，它只是推动图像，使它看起来伸展。

* {
  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" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" 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>

https://imseanfaulkner.github.io/Food-To-You/

你可以stack background images，也可以use a CSS gradient as a background image。所以只要在你的照片前面放一个渐变，左边是不透明的渐变，使你的纯色，然后在右边是透明的，这样照片就可以在下面看到了。

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;
}

这个解决方案的好处是，如果你愿意，你可以调整渐变的透明度，让你的一些图像在左边的纯色中渗出，或者给右边的图像着色，或者两者兼而有之。

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

CSS Gradient站点是一个创建、编辑和尝试渐变的好工具。

如何在CSS中分割图像的背景和颜色？

1条答案

相关问题

热门标签

最新问答