个人中心
gpt4 book ai didi

css - 线性渐变在 body 标签上重复

转载 作者：太空宇宙 更新时间：2023-11-03 22:31:45 24 4
gpt4 key购买 nike

当我在 body 标签上使用线性渐变时，即使我已将其设置为 no-repeat，它也会 self 重复。如下图所示:

Question How to stop the linear gradient from repeating in tag background?

enter image description here

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，但它使线性渐变只变成半页:

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

最佳答案

看来你面对的是background propagation从 body 到 html，因此您可以尝试通过添加以下代码来确保 body 至少占据全屏的高度:

body {
  min-height: 100vh;
}

关于css - 线性渐变在 body 标签上重复，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48237586/

24 4 0
文章推荐： c# - 如何使用 EmguCV 设置网络摄像头属性？
文章推荐： node.js - npm 安装在 Windows 10 上失败(node-gyp 重建)
文章推荐： image - 如果有 RGB 数据，如何处理 Gamma 校正
文章推荐： node.js - 为什么重启会恢复 Node 版本
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com