无法使图像与开始

发布于 2025-02-10 13:21:41 字数 1155 浏览 1 评论 0原文

CSS在尝试学习时似乎很难理解。现在，我正在使用显示Flex，并创建了一个导航栏。我想为此纳维托设置背景，几乎是屏幕的一半，但是图像并未从屏幕的最左边开始，还创建了一些滚动条。这是我的代码

.container {
  width: 100%;
  background-color: rgba(79, 79, 79, 0.13);
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 50px;
}

nav ul li {
  display: inline-block;
  margin: 0 15px;
}

.logo {
  width: 150px;
  height: auto;
  cursor: pointer;
}

.bg-img {
  margin: 0;
  opacity: 0.9;
  position: absolute;
  z-index: -1;
  justify-content: center;
}

<div class="container">
  <img src="files/images/logo.png" alt="LOGO" class="logo">
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/">Second</a></li>
      <li><a href="/">Third</a></li>
    </ul>
  </nav>

  <img src="files/images/top-bg.jpg" alt="bg" class="bg-img">

</div>

原文

CSS seems too hard for me to understand while trying to learn it. Now I am using display flex, and I created a navigation bar. I want to set a background to this navbar and almost half the screen, but the image doesn't start at the most left of the screen and also some scroll bars are created. here is my code

.container {
  width: 100%;
  background-color: rgba(79, 79, 79, 0.13);
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 50px;
}

nav ul li {
  display: inline-block;
  margin: 0 15px;
}

.logo {
  width: 150px;
  height: auto;
  cursor: pointer;
}

.bg-img {
  margin: 0;
  opacity: 0.9;
  position: absolute;
  z-index: -1;
  justify-content: center;
}

<div class="container">
  <img src="files/images/logo.png" alt="LOGO" class="logo">
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/">Second</a></li>
      <li><a href="/">Third</a></li>
    </ul>
  </nav>

  <img src="files/images/top-bg.jpg" alt="bg" class="bg-img">

</div>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

水波映月 2025-02-17 13:21:41

在CSS方面，此项工作：

body {
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
    height: 75px;
    background-color: rgba(79, 79, 79, 0.13);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

nav ul li {
    display: inline-block;
    margin: 0px 20px;
}

nav ul {
    margin-right: 50px;
}

.logo {
    width: 150px;
    height: auto;
    cursor: pointer;
    margin-left: 50px;
}

.bg-img {
    margin: 0;
    top: 0;
    left: 0;
    height: 75px;
    width: 100vw;
    opacity: 0.9;
    position: absolute;
    z-index: -1;
    justify-content: center;
}

问题在于，由于背景图像，您无法为Navbar设置固定的填充。背景图像还必须具有固定高度才能正确调整它。我建议将Navbar设置为75px的固定高度。

In terms of the css this works:

body {
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
    height: 75px;
    background-color: rgba(79, 79, 79, 0.13);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

nav ul li {
    display: inline-block;
    margin: 0px 20px;
}

nav ul {
    margin-right: 50px;
}

.logo {
    width: 150px;
    height: auto;
    cursor: pointer;
    margin-left: 50px;
}

.bg-img {
    margin: 0;
    top: 0;
    left: 0;
    height: 75px;
    width: 100vw;
    opacity: 0.9;
    position: absolute;
    z-index: -1;
    justify-content: center;
}

The problem is that you can't set a fixed padding for the navbar because of the background image. The background image also must have a fixed height to adjust it correctly. I would suggest to set the navbar to a fixed height of 75px.

回复收藏 0 原文

桜花祭 2025-02-17 13:21:41

.container {
  width: 100%;
  background-color: rgba(79, 79, 79, 0.13);
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 50px;
}

nav ul li {
  display: inline-block;
  margin: 0 15px;
  
}
.lp {
  float: right;
  
}

.logo {
  width: 150px;
  height: auto;
  cursor: pointer;
}

.header {
  background-image: url("files/images/top-bg.jpg");
  display: flex;
}
/* other code for your header bg */

<div class="container">
<div class="header">
  <img src="files/images/logo.png" alt="LOGO" class="logo">
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/">Second</a></li>
      <li><a href="/">Third</a></li>
    </ul>
  </nav>
</div>
</div>

.container {
  width: 100%;
  background-color: rgba(79, 79, 79, 0.13);
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 50px;
}

nav ul li {
  display: inline-block;
  margin: 0 15px;
  
}
.lp {
  float: right;
  
}

.logo {
  width: 150px;
  height: auto;
  cursor: pointer;
}

.header {
  background-image: url("files/images/top-bg.jpg");
  display: flex;
}
/* other code for your header bg */

<div class="container">
<div class="header">
  <img src="files/images/logo.png" alt="LOGO" class="logo">
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/">Second</a></li>
      <li><a href="/">Third</a></li>
    </ul>
  </nav>
</div>
</div>

回复收藏 0 原文

七颜 2025-02-17 13:21:41

*{box-sizing:border-box;}

这将选择所有元素给出实际的高度和宽度而不是溢出

*{box-sizing:border-box;}

This Will Select All Elements Give Actual Height and Width Not Overflow

回复收藏 0 原文

孤独难免 2025-02-17 13:21:41

对于您的第一个图像，我添加了一些定位属性来制作它，以使其在Navbar的左侧对齐。我将背景图像的填充提高到18.5px，因此它不在徽标中。对于滚动栏，我添加了溢出：隐藏和boxsing：border-box制作一个隐藏的滚动条，并使所有元素都留在一个区域中。

似乎您的显示：Flex正在与float属性和定位，只是一个想法。

.container {
  width: 100%;
  background-color: rgba(79, 79, 79, 0.13);
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 50px;
  box-sizing: border-box;
  overflow: hidden;
}

nav ul li {
  display: inline-block;
  margin: 0 15px;
}

.logo {
  width: 150px;
  height: auto;
  cursor: pointer;
  position: relative;
  left: -40px;
}


.bg-img {
  padding: 18.5px;
  opacity: 0.9;
  position: sticky;
  right: 1080px;
  top: -10px;
  float: left;
  z-index: -1;
  justify-content: center;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <div class="container">
  <img src="files/images/logo.png" alt="LOGO" class="logo">
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/">Second</a></li>
      <li><a href="/">Third</a></li>
    </ul>
  </nav>

  <img src="files/images/top-bg.jpg" alt="bg" class="bg-img">

</div>
    </body>
</html>

希望我帮忙。（：

For your first image, I added some positioning properties to make it so it is aligned at the left, the start of the navbar. I increased the padding of the background image to 18.5px so it was not in the way of the logo. And for the scrollbar, I added both overflow: hidden and box-sizing: border-box to make a hidden scrollbar and for all elements to stay in one area.

It seems as if your display: flex was messing with the float property and positioning, just a thought.

.container {
  width: 100%;
  background-color: rgba(79, 79, 79, 0.13);
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 50px;
  box-sizing: border-box;
  overflow: hidden;
}

nav ul li {
  display: inline-block;
  margin: 0 15px;
}

.logo {
  width: 150px;
  height: auto;
  cursor: pointer;
  position: relative;
  left: -40px;
}


.bg-img {
  padding: 18.5px;
  opacity: 0.9;
  position: sticky;
  right: 1080px;
  top: -10px;
  float: left;
  z-index: -1;
  justify-content: center;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <div class="container">
  <img src="files/images/logo.png" alt="LOGO" class="logo">
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/">Second</a></li>
      <li><a href="/">Third</a></li>
    </ul>
  </nav>

  <img src="files/images/top-bg.jpg" alt="bg" class="bg-img">

</div>
    </body>
</html>

Hope I helped. (:

回复收藏 0 原文

~没有更多了~