Lo que intento hacer es mostrar background-color y background-image, de modo que la mitad de mi div cubrirá la imagen de fondo de la sombra correcta, y la otra parte izquierda cubrirá el color de fondo.¿Por qué no puedo usar la imagen de fondo y el color juntos?
Pero cuando uso background-image, el color desaparece.
Es perfectamente posible utilizar tanto un color como una imagen como fondo para un elemento.
Ha configurado los estilos background-color y background-image. Si la imagen es más pequeña que el elemento, es necesario utilizar el estilo background-position para colocarlo a la derecha, y para evitar que se repiten y que cubre todo el fondo se utiliza el estilo background-repeat:
background-color: green;
background-image: url(images/shadow.gif);
background-position: right;
background-repeat: no-repeat;
o utilizando el estilo compuesto background:
background: green url(images/shadow.gif) right no-repeat;
Si utiliza el estilo compuesto background para establecer tanto por separado, sólo el último se utiliza, que es una de las razones posibles por las que su color no es visible:
background: green; /* will be ignored */
background: url(images/shadow.gif) right no-repeat;
No hay forma de limitar específicamente la imagen de fondo para que cubra solo una parte del elemento, por lo que debe asegurarse de que la imagen sea más pequeña que el elemento o tenga áreas transparentes para el color de fondo. se visible.
¿Cómo hago que esto funcione? Quiero usar 'background: -webkit-linear-gradient (bottom, rgb (222,222,222) 19%, rgb (201,201,201) 50%, rgb (219,219,219) 80%); Y background-image: url (icon.png) no-repeat right; '¿Cómo aplico tanto el degradado como el ícono de la imagen? Por favor ayuda. –
http://stackoverflow.com/questions/2504071/is-it-possible-to-combine-a-background-image-and-css3-gradients – Yasir
RE: @AnishNair - El 'background:' es una abreviatura y luego asume no hay imagen especificada y camina sobre la 'background-image' – sheriffderek
uso
background:red url(../images/samle.jpg) no-repeat left top;
Y para agregar a this respuesta, asegúrese de que la imagen en sí misma tiene un fondo transparente.
Buena adición. Esto me sucedió cuando utilicé un .jpg en lugar de un .png – corbin
No publiques esto como una respuesta mejor como un comentario. –
¿Has visto desde cuándo es esto? Prácticamente las generaciones fundadoras. Era salvaje oeste, sin reglas. Ustedes novatos lo tienen todo servido en una bandeja de oro ;-) –
Haga que la mitad de la imagen sea transparente para que se vea el color de fondo a través de ella.
De lo contrario, simplemente agregue otro div tomando hasta un 50% del div del contenedor y flote hacia la izquierda o hacia la derecha. A continuación, aplique la imagen o el color.
Esto supone que su imagen de fondo era tan grande como la que contiene div. –
Para matizar una imagen, puede usar CSS3 background para apilar imágenes y linear-gradient. En el ejemplo a continuación, utilizo un linear-gradient sin degradado real. El navegador trata los degradados como imágenes (creo que en realidad genera un mapa de bits y se superpone) y, por lo tanto, en realidad está apilando varias imágenes.
background: linear-gradient(0deg, rgba(2,173,231,0.5), rgba(2,173,231,0.5)), url(images/mba-grid-5px-bg.png) repeat;
Producirá un papel cuadriculado con tinte azul claro, si tuviera el png. Tenga en cuenta que el orden de apilamiento puede funcionar a la inversa de su modelo mental, con el primer elemento en la parte superior.
excelente documentación por Mozilla, aquí:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds
Herramienta para la construcción de los gradientes:
http://www.colorzilla.com/gradient-editor/
Nota - no funciona en EI11! Publicaré una actualización cuando descubra por qué, ya que se supone que debe hacerlo.
Gecko tiene un error raro en el establecimiento de la background-color para la html selector cubrirá hasta el background-image del elemento del cuerpo a pesar de que el elemento bodyen efecto tiene un mayor índice z y debe podrá ver el cuerpo background-image junto con el htmlbackground-color basado puramente en lógica simple.
Gecko Bug
Evitar la siguiente ...
html {background-color: #fff;}
body {background-image: url(example.png);}
Actividades alrededor
body {background-color: #fff; background-image: url(example.png);}
background:url(directoryName/imageName.extention) bottom left no-repeat;
background-color: red;
¿Cómo/Por qué responde esto la pregunta? Por favor, elabore editando su respuesta. –
Dos líneas como esta son innecesarias. Se puede poner en una declaración. Vea otros ejemplos aquí en la página. 'background: red url (directoryName/imageName.extention) abajo a la izquierda no-repeat; ' – Kout
He aquí un ejemplo del uso de background-image y 012.juntos:
.box {
background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .2) 15px, transparent 15px, transparent 30px);
width: 100px;
height: 100px;
margin: 10px 0 0 10px;
display: inline-block;
}<div class="box" style="background-color:orange"></div>
<div class="box" style="background-color:green"></div>
<div class="box" style="background-color:blue"></div>Hola a todos he intentado otra manera de combinar la imagen de fondo y el color de fondo en conjunto:
HTML
<article><canvas id="color"></canvas></article>
CSS
article{height: 490px;background:url("Your IMAGE") no-repear center cover;opacity:1}
canvas{widht: 100%; height: 490px; opacity: 0.9;}
JavaScript
window.onload = init();
var canvas, ctx;
function init(){canvas = document.getElementeById('color'); ctx = canvas.getContext('2d');
ctx.save(); ctx.fillstyle = '#00833d'; ctx.fillRect(0,0,490,490);ctx.restore();}
Por favor, hágamelo saber si ha funcionado para usted Gracias
¿Cuál es su código CSS? – outis