Question

从移动设备查看时，是否可以用背景颜色替换bootstrap jumbotron图像？

基本上我有一个显示在Bootstrap jumbotron中的图像，但我想从移动设备查看时将图像交换为深色背景颜色。

Answer 1

是的，可以通过了解断点或每个引导版本的媒体查询断点来实现。我只是使用下面的代码使用Bootstrap 3媒体查询断点，我希望这对你有很大的帮助。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <div class="jumbotron customjumbotron">
        <h1>Hello, world!</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. - <b>Ace</b></p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
    </div>
</body>
</html>
<style type="text/css">
    /*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/


    /*==========  Mobile First Method  ==========*/

    /* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {
        .customjumbotron{
            background-color: red;
        }
    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {
        .customjumbotron{
            background-color: orange;
        }

    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {
        .customjumbotron{
            background-color: teal;
        }
    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {
        .customjumbotron{
            background-color: black;
        }
    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {
        .customjumbotron{
            background-image: url('https://images.pexels.com/photos/192505/pexels-photo-192505.jpeg?w=940&h=650&auto=compress&cs=tinysrgb');
        }
    }
</style>

如何用背景颜色替换bootstrap jumbotron图像

1 个答案: