如何用背景顏色替換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圖像

回答

相關問題