Vraag Kan ik meerdere achtergrondkleuren toepassen met CSS3?


Ik weet hoe ik meerdere achtergrondafbeeldingen moet opgeven met CSS3 en hoe deze met verschillende opties kunnen worden weergegeven.

Momenteel heb ik een <div>, dat ongeveer 30% van de breedte aan de linkerkant een andere kleur moet hebben:

div#content {background: url("./gray.png") repeat-y, white; background-size: 30%;}

In plaats van het laden van de afbeelding die volledig grijs is, hoe kan ik dit doen door de kleur op te geven, en zonder extra <div>s?


30
2018-06-23 16:24


oorsprong


antwoorden:


U kunt niet echt - achtergrondkleuren zijn van toepassing op de volledige achtergrond van elementen. Houdt ze eenvoudig.

U zou in plaats daarvan een CSS-gradiënt met scherpe kleurgrenzen voor de achtergrond kunnen definiëren, bijvoorbeeld

background: -webkit-linear-gradient(left, grey, grey 30%, white 30%, white);

Maar slechts een paar browsers ondersteunen dat op dit moment. Zien http://jsfiddle.net/UES6U/2/

(Zie ook http://www.webkit.org/blog/1424/css3-gradients/ voor een uitleg CSS3-gradiënten, inclusief de scherpe kleurgrens-truc.)


29
2018-06-23 16:29



Ja het is mogelijk! en je kunt zoveel kleuren en afbeeldingen gebruiken als je maar wilt, hier is de juiste manier:

body{
/* Its, very important to set the background repeat to: no-repeat */
background-repeat:no-repeat; 

background-image:  
/* 1) An image              */ url(http://lorempixel.com/640/100/nature/John3_16), 
/* 2) Gradient              */ linear-gradient(to right, RGB(0, 0, 0), RGB(255, 255, 255)), 
/* 3) Color(using gradient) */ linear-gradient(to right, RGB(110, 175, 233), RGB(110, 175, 233));

background-position:
/* 1) Image position        */ 0 0, 
/* 2) Gradient position     */ 0 100px,
/* 3) Color position        */ 0 130px;

background-size:  
/* 1) Image size            */ 640px 100px,
/* 2) Gradient size         */ 100% 30px, 
/* 3) Color size            */ 100% 30px;
}


46
2017-08-27 04:12



Je kunt maar één kleur gebruiken maar zoveel afbeeldingen als je wilt, hier is het formaat:

background: [ <bg-layer> , ]* <final-bg-layer>

<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}

<final-bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} || <background-color>

of background: url(image1.png) center bottom no-repeat, url(image2.png) left top no-repeat;

Als u meer kleuren nodig hebt, maakt u een afbeelding van een effen kleur en gebruikt u deze. Ik weet dat het niet is wat je wilt horen, maar ik hoop dat het helpt.

Het formaat is van http://www.css3.info/preview/multiple-backgrounds/


4
2018-06-23 16:36



In deze LIVE DEMONSTRATIE Ik heb dit bereikt met behulp van de :voor css selector die vrij goed lijkt te werken.

.myDiv  {
position: relative; /*Parent MUST be relative*/
z-index: 9;
background: green;
    
/*Set width/height of the div in 'parent'*/    
width:100px;
height:100px;
}


.myDiv:before {
content: "";
position: absolute;/*set 'child' to be absolute*/
z-index: -1; /*Make this lower so text appears in front*/
   
    
/*You can choose to align it left, right, top or bottom here*/
top: 0; 
right:0;
bottom: 60%;
left: 0;
    
    
background: red;
}
<div class="myDiv">this is my div with multiple colours. It work's with text too!</div>

Ik dacht dat ik dit zou toevoegen omdat ik denk dat het best goed zou kunnen werken voor een percentage bar / visueel niveau van iets.

Het betekent ook dat je niet meerdere divs aanmaakt als dat niet nodig is, en deze pagina up-to-date houdt


3
2017-11-17 09:47



Als iemand een CSS-achtergrond met verschillende horizontale strepen in verschillende kleuren nodig heeft, kan ik dit als volgt bereiken:

body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
}

.css-stripes {
  margin: 0 auto;
  width: 200px;
  padding: 100px;
  text-align: center;
  /* For browsers that do not support gradients */
  background-color: #F691FF;
  /* Safari 5.1 to 6.0 */
  background: -webkit-repeating-linear-gradient(#F691FF, #EC72A8);
  /* Opera 11.1 to 12.0 */
  background: -o-repeating-linear-gradient(#F691FF, #EC72A8);
  /* Firefox 3.6 to 15 */
  background: -moz-repeating-linear-gradient(#F691FF, #EC72A8);
  /* Standard syntax */
  background-image: repeating-linear-gradient(to top, #F691FF, #EC72A8);
  background-size: 1px 2px;
}
<div class="css-stripes">Hello World!</div>

JSfiddle


1
2018-01-07 13:14



U kunt zoveel kleuren en afbeeldingen gebruiken als u maar wilt.

Houd er rekening mee dat de prioriteit waarmee de achtergrondafbeeldingen worden weergegeven FILO is, de eerste opgegeven afbeelding zich op de bovenste laag bevindt, de laatst opgegeven afbeelding zich op de onderste laag bevindt (zie het fragment).

#composition {
    width: 400px;
    height: 200px;
    background-image:
        linear-gradient(to right, #FF0000, #FF0000), /* gradient 1 as solid color */
        linear-gradient(to right, #00FF00, #00FF00), /* gradient 2 as solid color */
        linear-gradient(to right, #0000FF, #0000FF), /* gradient 3 as solid color */
        url('http://lorempixel.com/400/200/'); /* image */
    background-repeat: no-repeat; /* same as no-repeat, no-repeat, no-repeat */
    background-position:
        0 0, /* gradient 1 */
        20px 0, /* gradient 2 */
        40px 0, /* gradient 3 */
        0 0; /* image position */
    background-size:
        30px 30px,
        30px 30px,
        30px 30px,
        100% 100%;
}
<div id="composition">
</div>


1
2018-03-28 10:09