Wie Bootstrap Jumbotron Bild mit einer Hintergrundfarbe ersetzen

-1

ist es möglich, ein Bootstrap-Jumbotron Bild mit einer Hintergrundfarbe zu ersetzen, wenn von einem mobilen Gerät aus gesehen?Wie Bootstrap Jumbotron Bild mit einer Hintergrundfarbe ersetzen

Grundsätzlich habe ich ein Bild, das in einem Bootstrap-Jumbotron angezeigt wird, aber ich möchte das Bild nur auf einen dunklen Hintergrund wechseln, wenn es von einem mobilen Gerät aus betrachtet wird.

Quelle

2017-04-03 Tom

Ja, dann ist es möglich, durch ihre Stützpunkte zu kennen oder die Bootstrap Medien Abfrage Grenzwerte von alle Bootstrap-Versionen. Ich benutze nur die Bootstrap 3 Media Query Breakpoints für die folgenden Codes unten, ich hoffe, das wird dir sehr helfen.

<!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>

Quelle

2017-04-06 01:22:08 Ace

Danke Ace sehr geschätzt :) – Tom

Wie Bootstrap Jumbotron Bild mit einer Hintergrundfarbe ersetzen

Antwort

Verwandte Themen