Question

我在来自css的页面上有一个标题图片：

#photos-banner .navbar {
background-image: url("../images/bands/photos.jpg");
border-radius: 0;
border-bottom: 0;
padding-bottom: 8px;
background-repeat: no-repeat;
background-position: center;}

然后我在图像的顶部有一个导航：

<div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="scroll active"><a href="#navigation">Home</a></li>
                    <!--  "The Code" Dropdown to go here  -->
                    <li class="upper-links dropdown"><a>The Code <span class="fas fa-angle-down"></span></a>
                        <ul class="dropdown-menu">
                            <li class="profile-li"><a href="http://bobveale.com/Newest/about.html">About</a></li>
                            <li class="profile-li"><a href="http://bobveale.com/Newest/episodes.html">Episodes</a></li>
                            <li class="profile-li"><a href="http://bobveale.com/Newest/cast.html">Cast</a></li>
                            <li class="profile-li"><a href="http://bobveale.com/Newest/awards.html">Awards</a></li>
                            <li class="profile-li"><a href="http://bobveale.com/Newest/music.html">Music</a></li>
                            <li class="profile-li"><a href="http://bobveale.com/Newest/credits.html">Credits</a></li>
                            <li class="profile-li"><a href="http://bobveale.com/Newest/testimonials.html">Testimonals</a></li>
                        </ul>
                    </li>
                    <!--  /#"The Code" Dropdown to go to here  -->
                    <li class="scroll"><a href="http://bobveale.com/Newest/videos.html">Video</a></li>
                    <li class="scroll"><a href="http://bobveale.com/Newest/photos.html">Photos</a></li>
                    <li class="scroll"><a href="http://bobveale.com/Newest/interviews.html">Interviews</a></li>
                    <!--  /#"Trips" Dropdown to go to here  -->
                    <li class="upper-links dropdown"><a>Trips <span class="fas fa-angle-down"></span></a>
                        <ul class="dropdown-menu">
                            <li class="scroll"><a href="magic-egypt-tour-march-2018.html">March 2018</a></li>
                            <li class="scroll"><a href="magic-egypt-tour-sept-2018.html">September 2018</a></li>
                            <li class="scroll"><a href="magic-egypt-tour-march-2019.html">March 2019</a></li>
                        </ul>
                    </li>
                    <!--  /#"Trips" Dropdown to go to here  -->
                    <li class="scroll"><a href="http://bobveale.com/Newest/courses.html">Courses</a></li>
                    <!--    <li class="scroll"><a href="#blog">Order</a></li>  -->
                    <li class="scroll"><a href="contact.html">Contact</a></li>
                </ul>
            </div>

我正在尝试将图像调整大小与导航同步，但由于图像来自css，我似乎无法弄清楚如何做到这一点。

页面在这里：http://bobveale.com/Newest/csstest.html如果有人感兴趣的话。

我已经尝试了很多东西，并且很容易在html代码中调整图像大小（在该页面上可以看到），但我很难过。

思想，想法？

非常感谢鲍勃

Answer 1

使用background-size: cover填充元素中的图像。但是让图像中包含的文字不是一个好习惯。

css background-image无法调整大小

1 个答案: