属性 'font-size' 也会改变 'background-img' 大小

Question

我正在尝试使用背景图片制作网站： (CSS)

body {
    text-align: center;
    background-image: url("../img/clouds.jpg");
    background-size: 100% 760%;
}

而且我在页面顶部也有这个： (HTML)

<div class="pageTitle">
    <p>Title of Page basically</p>
</div>

(CSS)

.pageTitle {
    font-size: 200%;
}

当我尝试增大字体大小时，背景图像也会变大（基本上看起来像是放大了）。

我想这与百分比的使用有关，但即使使用 em 符号或 px 我仍然得到相同的结果。如何在不改变背景图像大小的情况下使 pageTitle 变大？

似乎使它起作用的是将 background-size: 100% 760%; 更改为 background-size: 100% 250%;（在我的例子中），但是，无论何时更改一个元素，它都需要作为一个整体进行修复。

代码片段：

var currentQuote = '';
var availableQuotes = [ 'bla','blo','ble','foo','bar'
];

function setRandomQuote() {
 currentQuote = availableQuotes[Math.floor(Math.random() * availableQuotes.length)];

 $('#quote').html(currentQuote);
 $('#tweetQuote').attr('href', 'https://twitter.com/intent/tweet?text=' + currentQuote).attr('target', '_blank');
}

$(function () {
 $('#randomQuote').click(function () {
  setRandomQuote();
 });
});

.w3-tangerine {
 font-family: 'Tangerine', serif;
 font-size: 200%;
 margin-top: 10%;
 margin-bottom: 5%;
}
body {
 text-align: center;
 background-image: url("https://images.pexels.com/photos/850674/pexels-photo-850674.jpeg?cs=srgb&dl=agriculture-animal-photography-animals-850674.jpg&fm=jpg");
 background-size: 100% 250%;
}
p {
 font-size: 100%;
}
#randomQuote, #tweetQuote {
 margin: 3% 1% 3% 1%;
}
#quote {
 margin: 2% 2% 2% 2%;
}

<!DOCTYPE html>
<html lang="en" >

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Random Quote Generator</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <noscript>Sorry, your browser does not support JavaScript!</noscript>
    </head>

<body>

  <div class="w3-tangerine">
 <p>Just Another Random Quote Generator</p>
</div>
<div id="quote">
 Click on the button to generate a quote!
</div>
<div>
    <input id="randomQuote" type="button" class="btn btn-primary" value="Generate a Quote!">
    <a id="tweetQuote" class="btn btn-primary" href="#">Tweet this Quote  <i class="fa fa-twitter"></i></a>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script  src="js/index.js"></script>
</body>

</html>

Answer 1

如果不设置 body 的 height，background 的 height 的百分比将作为常数的 height。所以 760% background-height 是 text-height*7.6。这就是为什么当你改变图像的大小时图像的大小也会变大..
你可以做的是设置

 html, body{
    height:100%;
    }

然后它将计算整个页面大小的百分比（因此在您的情况下，您只会看到图像高度的 1/7.6）。

Answer 2

有一个 article，它描述了您遇到的确切问题。

解决方案之一是为 body 提供以下属性。这将确保覆盖所有地方：

body {
  ...
  background-size: cover;
}

Answer 3

var currentQuote = '';
var availableQuotes = [ 'bla','blo','ble','foo','bar'
];

function setRandomQuote() {
 currentQuote = availableQuotes[Math.floor(Math.random() * availableQuotes.length)];

 $('#quote').html(currentQuote);
 $('#tweetQuote').attr('href', 'https://twitter.com/intent/tweet?text=' + currentQuote).attr('target', '_blank');
}

$(function () {
 $('#randomQuote').click(function () {
  setRandomQuote();
 });
});

.w3-tangerine {
 font-family: 'Tangerine', serif;
 font-size: 200%;
 margin-top: 10%;
 margin-bottom: 5%;
}
   

html, body {
    height: 100%;
    }
body {
 text-align: center;
 background-image: url("https://images.pexels.com/photos/850674/pexels-photo-850674.jpeg?cs=srgb&dl=agriculture-animal-photography-animals-850674.jpg&fm=jpg");
 background-size: cover;
}
p {
 font-size: 100%;
}
#randomQuote, #tweetQuote {
 margin: 3% 1% 3% 1%;
}
#quote {
 margin: 2% 2% 2% 2%;
}

<!DOCTYPE html>
<html lang="en" >

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Random Quote Generator</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <noscript>Sorry, your browser does not support JavaScript!</noscript>
    </head>

<body>

  <div class="w3-tangerine">
 <p>Just Another Random Quote Generator</p>
</div>
<div id="quote">
 Click on the button to generate a quote!
</div>
<div>
    <input id="randomQuote" type="button" class="btn btn-primary" value="Generate a Quote!">
    <a id="tweetQuote" class="btn btn-primary" href="#">Tweet this Quote  <i class="fa fa-twitter"></i></a>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script  src="js/index.js"></script>
</body>

</html>

属性 'font-size' 也会改变 'background-img' 大小

attribute 'font-size' alters the 'background-img' size as well

html

css

background-image

font-size

background-size