it-swarm-pt.tech

posição de fundo para cor de fundo

Eu sou capaz de dar a posição inicial de uma imagem de fundo. Mas se eu der posições para preenchimento sólido, não funciona. Aqui está o violino para isso.

http://jsfiddle.net/yPVJE/

Então, podemos definir a posição inicial e o tamanho de um fundo de preenchimento sólido?

Obrigado!

22
Rajkamal Subramanian

Você não pode compensar uma cor de fundo. Apenas imagens de fundo têm uma posição.

12
Scott

Eu teria uma abordagem semelhante ao StiR, mas usando a posição de fundo em vez de pontos de gradiente. Você pode então definir sua posição de fundo como faria normalmente.

div {
  background:linear-gradient(left, #000, #000) no-repeat 50px 50px;
}
36
Ash

Essa é uma maneira de compensar uma cor de plano de fundo sólida, usando um gradiente linear com uma cor transparente para o primeiro x número de pixels:

.offset {
    background-image: linear-gradient(left, transparent 300px,rgba(39,39,39,.5) 300px, rgba(39,39,39,.5) 100%);
    width: 100%;
    height: 500px;
}

Aqui está um demo no JSFiddle.

21
StuR

Sim, com gradiente linear funciona:

div { background-image: linear-gradient(transparent 10px, grey 10px); }
4
user3223452

Fique atento ao alinhamento inadequado quando linear-gradient pontos forem usados. Aqui está uma abordagem melhor:

background: linear-gradient(#6699cc, #6699cc);
background-size: auto 4em;
background-repeat: no-repeat;

Ele usa linear-gradient just para gerar uma cor sólida, que é redimensionada para refletir o tamanho da área coberta. Também background-position poderia ser usado conforme necessário

2
thodnev

Outra maneira de conseguir isso seria adicionar um pseudoelemento ao elemento div da seguinte forma:

div {
  ::before {
    border-top: 10px solid #0066a4;
    content:"";
    margin: 0 auto; /* this centers the line to the full width specified */
    position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
    top: 12px; left: 0; right: 0; bottom: 0;
    z-index: -1;
  }
}

Veja este CodePen por Eric Rasch para um exemplo de trabalho: https://codepen.io/ericrasch/pen/Irlpm

1
Mister Wonderful

Você pode usar background-size em vez de background-position para restringir a área colorida:

// randomly set background size every 1 second

var Elm = document.querySelector('div');
window.setInterval(()=> {
  var randomValue = Math.random()*100;
  Elm.style.backgroundSize = randomValue + '%';
}, 1000)
div {
   height: 100px;
   border: 1px solid black;
   transition: .4s ease-out;
   
   background: linear-gradient(to right, black, black) no-repeat;
   background-size: 0;  /* <--- starting from 0% */
 }
<div></div>

0
vsync

Se você puder fazer um pseudo-elemento :: before com cor, altura e largura bg e apenas compensá-lo de seu pai, você terá controle total de sua aparência. Muito mais fácil do que colocar uma borda no pseudo elemento:

/* adding a ::before element with bg and border radius to create a
cropped circle to overlay parent bg image's blue right end */

.myElement::before {
  background-color: #fff;
  content: "";
  margin: 0 auto;
  position: absolute;
  top: 43px;
  right: 0;
  width: 300px;
  height: 201px;
  z-index: -1;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
0
eon