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%;（在我的情况下），但是，每当元素被更改时，它都需要整体修复。

代码段：

＆＃13;

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();
	});
});

＆＃13;

.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%;
}

＆＃13;

<!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>

＆＃13;

Answer 1

未设置height的{{1}}，body的{{1}}的前缀是height的{{1}}。所以760％background是height * 7.6。这就是为什么当你改变图像的大小时图像的大小也会增长...你可以做的就是设置

background-height

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

Answer 2

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

其中一个解决方案是向body提供以下属性。这将确保无处不在：

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

Answer 3

＆＃13;

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();
	});
});

＆＃13;

.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%;
}

＆＃13;

<!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>

＆＃13;

属性＆＃39; font-size＆＃39;改变背景img＆＃39;大小

3 个答案: