3
votes

comment puis-je avoir une image d'arrière-plan sous la couleur d'arrière-plan?

Je me demandais s'il y avait un moyen de placer une image d'arrière-plan derrière la couleur d'arrière-plan.

J'ai ce sélecteur de couleur avec des curseurs et lorsque j'itère sur le canal alpha, je veux que l'image en damier s'affiche sous le Couleur Je suppose que je pourrais ajouter l'image en html puis la positionner sous le div mais n'y a-t-il pas une solution "plus propre" sans avoir à ajouter position: absolue; ? Je veux vraiment éviter cela si possible

J'ai essayé d'utiliser :: avant et :: après mais jusqu'à présent, sans succès, l'image a gagné ' t affichage. J'ai essayé avec content: url ("") mais il reste toujours au top et ne semble pas pouvoir l'amener ci-dessous avec z-index

<div class="palette">
  <div class="paletteColor"></div>
  <ul class="sliders">
    <li><input id="red" type="range" min="0" max="255" value="150"></li>
    <li><input id="green" type="range" min="0" max="255" value="222"></li>
    <li><input id="blue" type="range" min="0" max="255" value="22"></li>
    <li><input id="alpha" type="range" min="0" max="100" value="100"></li>
  </ul>
  <div>

.palette {
  border: 3px solid black;
}

.sliders {
  list-style: none;
  left: 80px;
  display: inline-block;
}

.paletteColor {
  height: 100px;
  width: 100px;
  display: inline-block;
}

.paletteColor::after {
  height: 100px;
  width: 100px;
  display: inline-block;
  background-color: black;
}

.paletteColor::before {
  height: 100px;
  width: 100px;
  display: inline-block;
  background-image: url("./checkered.jpg");
}

let red = document.querySelector("#red");
let green = document.querySelector("#green");
let blue = document.querySelector("#blue");
let alpha = document.querySelector("#alpha");
let paletteColor = document.querySelector(".paletteColor")
paletteColor.style.backgroundColor = `rgba(${red.value}, ${green.value}, ${blue.value}, ${alpha.value/100})`

red.addEventListener("input", rgbaValue);
green.addEventListener("input", rgbaValue);
blue.addEventListener("input", rgbaValue);
alpha.addEventListener("input", rgbaValue);

function rgbaValue() {
  let rgba = `rgba(${red.value}, ${green.value}, ${blue.value}, ${alpha.value/100})`
  paletteColor.style.backgroundColor = rgba
}

html css

3 commentaires

IMO une image en damier de fond absolument positionnée est la solution la plus simple ici

Le problème est que l'image ne sera pas vue car la couleur de fond sera opaque ...

Ce message pourrait être utile stackoverflow.com/questions / 8195215 /…

3 Réponses :

2
votes

<div id="img-wrapper"><img src="https://images.freeimages.com/images/large-previews/25d/eagle-1523807.jpg" alt=""></div>

#img-wrapper {
  background: red;
}

img {
  width: 100%;
  opacity: 0.5;
  vertical-align: middle;
}

Ceci ajoute une superposition sur une image réelle.

0 commentaires

2
votes

Vous pouvez utiliser :: before code> avec la couleur d'arrière-plan.

<div></div>

div {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: rgba(100, 0, 1, .5);
}

div::after {
  position: absolute;
  content: '';
  width: 100px;
  height: 100px;
  background-image: url(//img.pranavc.in/100);
  z-index: -1;
}

Ou meilleure alternative en plaçant l'image dans :: avant , puis en le réduisant z-index valeur qui rend le div accessible.

<div></div>

div {
  position: relative;
  width: 100px;
  height: 100px;
  background-image: url(//img.pranavc.in/100)
}

div::after {
  position: absolute;
  content: '';
  background-color: rgba(100, 0, 1, .5);
  width: 100px;
  height: 100px;
}

0 commentaires

0
votes

D'accord, j'ai compris que si je définissais la position sur absolue et que je jouais avec z-index que cela fonctionne, la seule chose est que j'utilise du contenu au lieu de background-color .

.paletteColor{
    height: 100px;
    width: 100px;
    display: inline-block;
    z-index: 0;
}

.paletteColor::before{
    height: 100px;
    width: 100px;
    display: inline-block;
    position: absolute;
    z-index: -1;
    content: url("./checkered.png");
}

0 commentaires