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

-1

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

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

2017-04-03 Tom

是的，它通过了解他们的断点或引导媒体每一个引导版本查询断点是可能的。我只是在下面的代码中使用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>

来源

2017-04-06 01:22:08 Ace

非常感谢王牌赞赏:) – Tom

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

回答

相关问题