Question

我在导航栏中有2个背景图片场景（我认为它就在哪里 - 我是初学者/ css）。

以下背景图片的高度很大：

.navbar-brand { 
  font-size:1.5em
}
header {
  background-image: url(../../images/backpic.jpg);
  background-repeat: none;
  background-attachment: scroll;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  text-align: center;
  color: #fff
}

第二个背景图片的高度很小：

.navbar-default.navbar-shrink .navbar-brand { 
  font-size:1.5em
}
header {
  background-attachment: scroll;
  background-position: center center;
  background-repeat: no-repeat;
  text-align: center;
  color: #fff;
  background-image: url(../../images/backpic.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

我试图制作第二个的高度，只是稍微大一点，但没有第一个那么大。

我还想在导航栏的左中部下方添加一个漂亮的容器，即＆＃34; ASDFADF＆＃34;刻字部分。

任何帮助都会很棒......

Answer 1

首先，让我们稍微清理你的造型。您声明的所有背景属性都可以合并为一个名为background的简写。这是你的代码清理：

.navbar-brand { 
  font-size:1.5em
}
header {
  background: url(../../images/backpic.jpg) center center / cover no-repeat;
  text-align: center;
  color: #fff
}

background-size不再需要供应商前缀，可以合并到上述声明中。

接下来，要增加第二张图像背景的大小，请执行以下操作：

.navbar-default.navbar-shrink .navbar-brand { 
  font-size:1.5em
}
header.smaller {
  background: url(../../images/backpic.jpg) center center / cover no-repeat;
  background-size: 125%; /* Adjust this value to the desired size */
  text-align: center;
  color: #fff;
}

您需要为第二个容器添加一个不同的类，以便您可以单独定位它（因为它们都使用相同的基本元素选择器）。

背景pic 2场景 - 1个高度很大，其他很小

1 个答案: