如何制作一个css样式表，用后台中的猫图像替换计算机图像？

时间：2016-07-17 16:43:10

标签： css twitter-bootstrap-3

标题全部消失了：如何将此smartcat.png图像作为标题的整个背景？

我希望将答案添加到我的样式表＆＃34; cat.css＆＃34;

我感谢使用bootstrap进行编码的所有建议和更好的实践。

这是网站：

http://chillcastle.com/cat/felinedelirium

这是我的样式表：     .header-content {background：url（＆＃34; img / smartcat.png＆＃34;）;} 

.header {background: url("img/smartcat.png");}

以下是网页代码：

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title>Feline Delirium</title>

<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>

<!-- Plugin CSS -->
<link href="vendor/magnific-popup/magnific-popup.css" rel="stylesheet">

<!-- Theme CSS -->
<link href="css/creative.min.css" rel="stylesheet">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->


<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="www.chillcreatives.com">
                <span class="sr-only">Poop</span> Menu <i class="fa fa-bars"></i>
            </button>
            <a class="navbar-brand page-scroll" href="#page-top">Felines</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a class="page-scroll" href="#about">Cat Tales</a>
                </li>
                <li>
                    <a class="page-scroll" href="#services">Cat News</a>
                </li>
                <li>
                    <a class="page-scroll" href="#portfolio">Cat Life</a>
                </li>
                <li>
                    <a class="page-scroll" href="#contact">Cat Stuff</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>

<header>

    <div class="header-content">
        <div class="header-content-inner">

            <h1 id="homeHeading">Kitty Cats</h1>
            <hr>
            <p>Feline Delirium is a fun thing.</p>
            <a href="#about" class="btn btn-primary btn-xl page-scroll">Find Out More</a>
        </div>
    </div>
</header>

<section class="bg-primary" id="about">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 text-center">
                <h2 class="section-heading">Cats</h2>
                <hr class="light">
                <p class="text-faded">Whoa. Cats.</p>
                <a href="#services" class="page-scroll btn btn-default btn-xl sr-button">Get Started!</a>
            </div>
        </div>
    </div>
</section>

<section id="services">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2 class="section-heading">BIJOUXXX</h2>
                <hr class="primary">
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-6 text-center">
                <div class="service-box">
                    <i class="fa fa-4x fa-diamond text-primary sr-icons"></i>
                    <h3>Sturdy Templates</h3>
                    <p class="text-muted">Cats!</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 text-center">
                <div class="service-box">
                    <i class="fa fa-4x fa-paper-plane text-primary sr-icons"></i>
                    <h3>Ready to Ship</h3>
                    <p class="text-muted">You can use this theme as is, or you can make changes!</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 text-center">
                <div class="service-box">
                    <i class="fa fa-4x fa-newspaper-o text-primary sr-icons"></i>
                    <h3>Up to Date</h3>
                    <p class="text-muted">We update dependencies to keep things fresh.</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 text-center">
                <div class="service-box">
                    <i class="fa fa-4x fa-heart text-primary sr-icons"></i>
                    <h3>Made with Love</h3>
                    <p class="text-muted">You have to make your websites with love these days!</p>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="no-padding" id="portfolio">
    <div class="container-fluid">
        <div class="row no-gutter popup-gallery">
            <div class="col-lg-4 col-sm-6">
                <a href="img/cubecat.png" class="portfolio-box">
                    <img src="img/cubecat.png" class="img-responsive" alt="">
                    <div class="portfolio-box-caption">
                        <div class="portfolio-box-caption-content">
                            <div class="project-category text-faded">
                                Category
                            </div>
                            <div class="project-name">
                                Project Name
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-lg-4 col-sm-6">
                <a href="img/smartcat.png" class="portfolio-box">
                    <img src="img/smartcat.png" class="img-responsive" alt="">
                    <div class="portfolio-box-caption">
                        <div class="portfolio-box-caption-content">
                            <div class="project-category text-faded">
                                Category
                            </div>
                            <div class="project-name">
                                Project Name
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-lg-4 col-sm-6">
                <a href="img/goldencat.png" class="portfolio-box">
                    <img src="img/goldencat.png" class="img-responsive" alt="">
                    <div class="portfolio-box-caption">
                        <div class="portfolio-box-caption-content">
                            <div class="project-category text-faded">
                                Category
                            </div>
                            <div class="project-name">
                                Project Name
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-lg-4 col-sm-6">
                <a href="smokincat.jpg" class="portfolio-box">
                    <img src="img/smokingcat.jpg" class="img-responsive" alt="">
                    <div class="portfolio-box-caption">
                        <div class="portfolio-box-caption-content">
                            <div class="project-category text-faded">
                                Category
                            </div>
                            <div class="project-name">
                                Project Name
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-lg-4 col-sm-6">
                <a href="img/5.jpg" class="portfolio-box">
                    <img src="img/" class="img-responsive" alt="">
                    <div class="portfolio-box-caption">
                        <div class="portfolio-box-caption-content">
                            <div class="project-category text-faded">
                                Category
                            </div>
                            <div class="project-name">
                                Project Name
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-lg-4 col-sm-6">
                <a href="img/6.jpg" class="portfolio-box">
                    <img src="img/portfolio/thumbnails/6.jpg" class="img-responsive" alt="">
                    <div class="portfolio-box-caption">
                        <div class="portfolio-box-caption-content">
                            <div class="project-category text-faded">
                                Category
                            </div>
                            <div class="project-name">
                                Project Name
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</section>

<aside class="bg-dark">
    <div class="container text-center">
        <div class="call-to-action">
            <h2>Bijouxxx</h2>
            <a href="Dogs" class="btn btn-default btn-xl sr-button">cats!</a>
        </div>
    </div>
</aside>

<section id="contact">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 text-center">
                <h2 class="section-heading">Let's Get In Touch!</h2>
                <hr class="primary">
                <p>Hit us up with your cat pic</p>
            </div>
            <div class="col-lg-4 col-lg-offset-2 text-center">
                <i class="fa fa-phone fa-3x sr-contact"></i>
                <p>123-456-6789</p>
            </div>
            <div class="col-lg-4 text-center">
                <i class="fa fa-envelope-o fa-3x sr-contact"></i>
                <p><a href="the chill castle @ gmail.com >feedback@startbootstrap.com</a></p>
            </div>
        </div>
    </div>
</section>




<!-- jQuery -->
<script src="vendor/jquery/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>

<!-- Plugin JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="vendor/scrollreveal/scrollreveal.min.js"></script>
<script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>

<!-- Theme JavaScript -->
<script src="js/creative.min.js"></script>

1 个答案:

答案 0 :(得分：1)

猫图片与标题的宽高比是不同的。您可以稍微裁剪图像高度以帮助它适应。

之后，您可以使用此代码进行缩放以覆盖整个标头。您将需要弄乱css位置和猫图像的大小，看看哪些对您有用。

.header-content { 
  background: url(img/smartcat.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

以下是全宽背景图片的文章链接 - https://css-tricks.com/perfect-full-page-background-image/

快乐的编码！

添加了注释

标题非常薄，目前的纵横比约为7:1。这基本上意味着为了保持纵横比，每增加一个高度都会导致宽度增加7倍。因此，如果您将高度加倍，则宽度将为14（即14:2）

现在，您的图片的宽高比为25:24。 所以想象一下，你正试图在一条细长的水平线内放置一个方形盒子。如果不扭曲图像，就不会真正适应。

所以你基本上有三个选择。

  1. 将background-size:cover更改为background-size:contain。这将基本上使图像的高度与父级相同，以便在不破坏比率的情况下显示整个图像。基本上它会确保您的整个图像显示在容器中。但这也意味着您的容器不会被图像完全覆盖。以下是选项1的示例。 http://i.imgur.com/GxcF4aO.jpg?1

  2. 保留background-size:cover并将图片的宽高比调整为更像标题。即以高度裁剪图像。 以下是裁剪图像的示例。 http://i.imgur.com/GNEZq4U.jpg?1

  3. 保持一切顺畅，并增加标题的高度以匹配图像。

    4. 这是一个显示宽高比如何工作的链接。您可以切换底部的How to handle ratio mismatches单选按钮以检查选项1和2之间的区别。 http://andrew.hedges.name/experiments/aspect_ratio/确保您已选中show sample image按钮。输入标题的尺寸以及图像的高度或宽度，以找出图像的比例。

    希望这有帮助。

相关问题
最新问题