线性渐变在body标签上重复 [英] Linear Gradient is repeating itself on body tag
本文介绍了线性渐变在body标签上重复的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我在body标签上使用线性渐变时，即使我将其设置为 no-repeat ，它也会重复自身.如下图所示:
when I use a linear gradient on my body tag is is repeating itself even though I have set it no-repeat. As shown in below image:
问题:如何阻止线性渐变在标签背景中重复出现?
Question How to stop the linear gradient from repeating in tag background?
CSS
html, body {
height: 100% !important;
}
body {
background: linear-gradient(to bottom right, #0087e0 50%, #161e2c 50%, #161e2c) no-repeat;
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
.header {
background: #FFFFFF;
width: 100%;
padding: 2em;
}
.wrapper {
background: #F0F0F0;
min-height: 600px;
border-radius: 0.5em;
}
@media (max-width: 968px) {
.text-mobile {
text-align: center !important;
}
}
.card {
box-shadow: 0 0 4px 0 rgba(0,0,0,.08), 0 2px 4px 0 rgba(0,0,0,.12);
border-radius: 3px;
background: #fff;
}
.card-title {
padding-bottom: 20px;
border-bottom: 1px solid #DEDEDE;
}
.bg-blue {
background: #161e2c;
}
.nav-link {
color: #fff !important;
}
@media (min-width: 768px) {
.navbar-nav .nav-item {
float: left;
position: relative;
}
.navbar-nav .nav-item.active:after {
border-bottom: 5px solid #0087e0;
bottom: -8px;
content: " ";
left: 0;
position: absolute;
right: 0;
}
}
.footer {
border-top: 2px solid #0087e0;
margin-top: 3em;
background: #161e2c;
width: 100%;
padding: 2em;
color: #fff !important;
}
.footer h3 {
font-size: 18px;
font-weight: bolder;
}
.footer a {
text-decoration: none;
color: #FFFFFF;
}
.footer hr{
border: 1px solid #0087e0;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<title><?php echo $title;?></title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/plugins/bootstrap/css/bootstrap.css');?>">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/jquery/jquery-ui/jquery-ui.min.css');?>">
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/jquery/jquery-ui/jquery-ui.theme.css');?>">
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/jquery/jquery-ui/jquery-ui.structure.css');?>">
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/stylesheet.css');?>">
<script type="text/javascript" src="<?php echo base_url('assets/jquery/jquery-3.2.1.js');?>"></script>
<script type="text/javascript" src="<?php echo base_url('assets/jquery/jquery-ui/jquery-ui.js');?>"></script>
<script type="text/javascript" src="<?php echo base_url('assets/jquery/popper.min.js');?>"></script>
<script type="text/javascript" src="<?php echo base_url('assets/plugins/bootstrap/js/bootstrap.js');?>"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.4/holder.min.js"></script>
</head>
<body>
<div class="header">
<div class="container">
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 text-left mb-2 text-mobile">
<h3><?php echo $logo;?></h3>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 text-right mb-2 text-mobile">
<a href="<?php echo base_url('admin');?>" role="button" class="btn btn-dark">Admin Login</a>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-expand-lg bg-blue mb-3">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars text-white" aria-hidden="true"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item <?php echo $active_home;?>">
<a class="nav-link" href="<?php echo base_url();?>">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item <?php echo $active_about;?>">
<a class="nav-link" href="<?php echo base_url('about');?>">About</a>
</li>
<li class="nav-item <?php echo $active_contact;?>">
<a class="nav-link" href="<?php echo base_url('contact');?>">Contact</a>
</li>
<li class="nav-item <?php echo $active_events;?>">
<a class="nav-link" href="<?php echo base_url('events');?>">Events</a>
</li>
<li class="nav-item <?php echo $active_gallery;?>">
<a class="nav-link" href="<?php echo base_url('gallery');?>">Gallery</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<?php echo form_input('search_events', '', array('class' => 'form-control mr-sm-2', 'placeholder' => 'Search For Events'));?>
<button id="search_events" class="btn btn-outline-info my-2 my-sm-0" type="button">Search Events</button>
</form>
</div>
</div>
</nav>
<div class="container">
<div class="wrapper p-3">
<div class="row">
<div class="col-xl-9 col-lg-9 col-md-9 col-sm-12 col-xs-12 mt-2 mb-3">
<div class="card">
<div class="card-body">
<div class="card-title"><h3 style="font-size: 16px;">Up And Coming Events For </h3></div>
<ul class="list-unstyled event-home">
</ul>
</div>
</div>
</div>
<div class="col-xl-3">
<div class="card">
<div class="card-body">
<div class="form-group">
<div class="advert">
<img data-src="holder.js/100px180" class="img-thumbnail">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-9 col-lg-9 col-md-9 col-sm-12 col-xs-12 mt-3 mb-3">
</div>
<div class="col-xl-3">
<div class="card">
<div class="card-body">
<div class="form-group">
<div class="advert">
<img data-src="holder.js/100px180" class="img-thumbnail">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 mb-3 mt-3">
<img data-src="holder.js/100px180?theme=sky" class="img-thumbnail">
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-xs-12 mb-3">
<h3>Information</h3>
<hr>
<ul class="list-unstyled">
<li><a href="">Information</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Contact Us</a></li>
<li><a href="">Subscribe to News Letter</a></li>
</ul>
</div>
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-xs-12 mb-3">
<h3>Site</h3>
<hr>
<ul class="list-unstyled">
<li><a href="">Events</a></li>
<li><a href="">Sitemap</a></li>
<li><a href="">Location</a></li>
<li><a href="">Club Fee's</a></li>
</ul>
</div>
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-xs-12 mb-3">
</div>
</div>
</div>
</div>
</body>
</html>
更新
我在下面尝试了此CSS，但它使线性渐变仅变为半页:
update
I tried this css below but it makes the linear gradient go half page only:
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background: linear-gradient(to bottom right, #0087e0 50%, #161e2c 50%, #161e2c);
background: -moz-linear-gradient(to bottom right, #0087e0 50%, #161e2c 50%, #161e2c) no-repeat;
background: -ms-linear-gradient(to bottom right, #0087e0 50%, #161e2c 50%, #161e2c) no-repeat;
background: -webkit-linear-gradient(to bottom right, #0087e0 50%, #161e2c 50%, #161e2c) no-repeat;
background: -webkit-linear-gradient(to bottom right, #0087e0 50%, #161e2c 50%, #161e2c) no-repeat;
background: -o-linear-gradient(to bottom right, #0087e0 50%, #161e2c 50%, #161e2c) no-repeat;
background: linear-gradient(to bottom right, #0087e0 50%, #161e2c 50%, #161e2c) no-repeat;
}
推荐答案
似乎您正面临来自身体的背景传播到html，因此您可以尝试通过添加以下代码来确保正文至少占据了全屏的高度:
It seems you are facing background propagation from body to html so you may try to be sure that body is at least taking the height of full screen by adding this code:
body {
min-height: 100vh;
}这篇关于线性渐变在body标签上重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
