html - 背景图像响应宽度为60％

Closed. This question is off-topic。它当前不接受答案。












                            想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。

                        4年前关闭。



如何设置具有背景图像和60％响应速度的div？
我在网站顶部有导航栏（div），左边距为左边距，右边距为20％，响应式工作在这里。
在此之下，还有另一个div，左边距为左边距，右边距为20％，带有背景图片，此处的响应式不起作用。

第二个问题：如果我有3个div与图像相同的行（1个div中的1 img），如果由于用户的分辨率而不能位于1行中，如何将它们“爆炸”到2或3行？

如果需要，请演示：http://tlumacz-litewskiego.eu/

最佳答案

看来您只是在学习，所以我想我需要花一点时间并提供一些指导。首先，您应该了解Bootstrap是一个框架，可以使您完成许多尝试要做的事情。如您所见，元素现在已排列并对齐，但我使用Bootstrap来实现此目的，而不是使用其他CSS。此外，随着屏幕折叠到移动屏幕上，您可以控制要堆叠的内容的时间。另外，您将看到通过使用Bootstrap，需要更少的样式即可达到所需的结果。

示例：http://jsbin.com/beruqorinu/edit?output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<header>
    <div class="container">
        <div class="row">
            <div id="header" class="col-sm-12">
                <h1>Tłumacz-litewskiego</h1>
            </div>
        </div>
        <div id="menu_container" class="row">
            <div class="col-sm-12">
                <nav>
                    <i class="fa fa-home"></i> Strona główna
                </nav>
            </div>
        </div>
        <div id="main_image" class="row">
            <div class="col-sm-8 bookbox">
                <h2>Tłumacz języka litewskiego</h2>
                <h4>mgr Živilė Wygońska</h4>
                <img class="img-responsive" src="http://tlumacz-litewskiego.eu/img/book.png">
            </div>
            <div class="col-sm-4 contact">
                <i class="fa fa-globe"></i> Polska, Podlaskie, Suwałki<br />
                <i class="fa fa-phone"></i> <b>Tel:</b> +48 515 231 589<br />
                <i class="fa fa-envelope-o"></i> <b>Email:</b> [email protected]
            </div>
        </div>
    </div>
</header>

<section id="info">
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <h3><i class="fa fa-book"></i> O mnie</h3>
                <img src="http://tlumacz-litewskiego.eu/img/slide1.jpg" class="img-responsive">
                <p>Litewski to mój ojczysty język, większość życia mieszkałam na Litwie, gdzie studiowałam filologię litewską na Uniwersytecie Wileńskim.</p>
                <div class="collapse" id="cl1">
                    <p>Po przeprowadzce do Polski  na Uniwersytecie Warszawskim w Instytucie Języka I Kultury Polskiej Dla Cudzoziemców uzyskałam świadectwo znajomości języka polskiego. Ukończyłam pedagogikę na Uniwersytecie w Białymstoku.</p>
                    <p>Posiadam dziesięcioletnie doświadczenie jako tłumacz języka litewskiego. Przez te 10 lat, pracując z różnymi klientami, przetłumaczyłam setki stron o przeróżnej tematyce, m.in. turystyka, sprawozdania, statuty, przetargi, strony www, artykuły, etykiety, instrukcje obsługi, katalogi, foldery reklamowe, dokumentacje sądowe i wiele wiele innych.</p>
                </div>
                <a role="button" data-toggle="collapse" href="#cl1" aria-expanded="false" aria-controls="collapseExample1" id="element1" onclick="changeText(1)">Więcej...</a>
            </div>
            <div class="col-sm-4">
                <h3><i class="fa fa-newspaper-o"></i> Oferta</h3>
                <img src="http://tlumacz-litewskiego.eu/img/slide2.jpg" class="img-responsive">
                <p>Tłumaczenia ustne, pisemne, nauka języka litewskiego i korepetycje.</p>
                <div class="collapse" id="cl2">
                    <p><b>Tłumaczenia pisemne:</b> Tłumaczę teksty na język litewski oraz z języka litewskiego. Przetłumaczyłam m.in. kilkanaście katalogów, opowiadania, różne dokumenty, umowy, projekty i dokumenty związanie z realizacją projektów unijnych.</p>
                    <p><b>Tłumaczenia ustne:</b> tłumaczenie konferencyjne, symultaniczne (możliwość wynajmu sprzętu dla tłumaczeń symultanicznych), konsekutywne, towarzyszące, szeptane.</p>
                    <p><b>Nauka języka litewskiego i korepetycje:</b> prowadzę kursy nauki języka litewskiego na wszystkich poziomach dla klientów indywidualnych oraz instytucji.</p>
                    <p>Każde zlecenie jest traktowane indywidualnie, swoją pracę wykonuję rzetelnie i solidnie. Na życzenie klienta mogę przedstawić referencje zadowolonych klientów. </p>
                    <p>Gwarantowane bezpieczeństwo przekazywanych dokumentów oraz informacji. Każdy dokument jest traktowany jako poufny. Wykonane tłumaczenie jest archiwizowane przez okres 12 miesięcy. </p>
                    <p><b>Cena</b> tłumaczenia zależy od stopnia trudności tekstu, rodzaju tłumaczenia oraz terminu realizacji. Istnieje możliwość negocjacji cen przy większych zleceniach. </p>
                    1 strona obliczeniowa to 1600 znaków ze spacjami 12-punktową czcionką Times New Roman.</p>
                </div>
                <a role="button" data-toggle="collapse" href="#cl2" aria-expanded="false" aria-controls="collapseExample2" id="element2" onclick="changeText(2)">Więcej...</a>
            </div>
            <div class="col-sm-4">
                <h3><i class="fa fa-users"></i> Klienci</h3>
                <img src="http://tlumacz-litewskiego.eu/img/slide3.jpg" class="img-responsive">
                <p>Urząd Miasta Suwałki<br />
                Regionalny Ośrodek Kultury i Sztuki w Suwałkach<br />
                Suwalski Ośrodek Kultury...</p>
                <div class="collapse" id="cl3">
                    <p>Wigierski Park Narodowy<br />
                    Muzeum Wigier (Stary Folwark)<br />
                    Starostwo Powiatowe w Suwałkach<br />
                    Urząd Miasta w Giżycku<br />
                    Centrum Informacji Turystycznej w Giżycku, Wydawnictwo Mazurskie S.C.<br />
                    Podlaska Regionalna Organizacja Turystyczna<br />
                    oraz inni.</p>
                </div>
                <a role="button" data-toggle="collapse" href="#cl3" aria-expanded="false" aria-controls="collapseExample3" id="element3" onclick="changeText(3)">Więcej...</a>
            </div>
        </div>
    </div>
</section>

<footer>
    <div class="container">
        <div id="copyright" class="row">
            <div class="col-sm-12">
                &copy; 2015 <a href="http://tlumacz-litewskiego.eu/">tlumacz-litewskiego.eu</a>
            </div>
        </div>
    </div>
</footer>

<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-65084817-1', 'auto');
    ga('send', 'pageview');
</script>
<script type="text/javascript">
    function changeText(idElement) {
        var element = document.getElementById('element' + idElement);
        if (idElement === 1 || idElement === 2 || idElement === 3) {
            if (element.innerHTML === 'Więcej...') element.innerHTML = 'Mniej...';
            else {
                element.innerHTML = 'Więcej...';
            }
        }
    }
</script>

</body>
</html>

CSS：

header h1 {
  margin-bottom: 20px;
  font-size: 40px;
}
nav {
  padding-top: 6px;
  padding-bottom: 6px;
  margin-bottom: 20px;
  font-size: 24px;
  border-top: 2px solid #C7C7C7;
  border-bottom: 2px solid #C7C7C7;
}
#main_image {
  background: url(http://tlumacz-litewskiego.eu/img/bg.jpg) no-repeat center center;
  background-size: cover;
}
.bookbox,
.contact {
   padding: 20px;
}
.bookbox img {
  max-width: 128px;
}
.contact {
  font-size: 16px;
  color: white;
}
.contact i {
  margin-right: 2px;
}
#info {
  text-align: center;
}
#copyright {
  margin-top: 20px;
  text-align: right;
}

我已经为您完成了此操作，希望它可以作为一个示例，以便您可以学习如何正确地进行布局。几点建议：

尝试避免使用内联CSS（直接在HTML中）
尽可能避免使用百分比。 Bootstrap是固定像素框架。
访问http://getbootstrap.com并浏览文档，最重要的是入门页面（并查看示例）。

希望这可以帮助！

关于html - 背景图像响应宽度为60％，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31621179/