10

Opacidad con imágenes (I)

Podemos conseguir fácilmente distintos grados de opacidad para nuestras imágenes, el efecto queda bien, aunque en mi caso no le encuentro demasiada utilidad, supongo que vendrá bien para los que incluyan en su blog imágenes propias, es una forma de protegerlas sin afearlas con texto o marcas de agua.

Esta es la imagen original con los distintos grados de opacidad que podemos darle, y el código que hemos de aplicar para conseguirla en cada caso.
En "width" y "height", dentro del código, hemos de poner la anchura y altura de nuestra imagen.


Esta es la imagen con una opacidad del 75% aplicada.
<div style="width:122px;height:122px;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;
background:url(http://img82.imageshack.us/img82/6461/imageswb5.jpg)">
</div>



Esta es la imagen con una opacidad del 50% aplicada.
<div style="width:122px;height:122px;filter:alpha(opacity=50);-moz-opacity:.50;opacity:.50;
background:url(http://img82.imageshack.us/img82/6461/imageswb5.jpg)">
</div>


Esta es la imagen con una opacidad del 25% aplicada.
<div style="width:122px;height:122px;filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;
background:url(http://img82.imageshack.us/img82/6461/imageswb5.jpg)">
</div>


Esta es la imagen con una opacidad del 100% aplicada.
<div style="width:122px;height:122px;filter:alpha(opacity=100);-moz-opacity:.100;opacity:.100;
background:url(http://img82.imageshack.us/img82/6461/imageswb5.jpg)">
</div>



Tenéis que cambiar la url, por la de vuestra imagen.
Procurad colocar el código todo seguido en la misma línea, sino, a veces, no se muestra la imagen, yo lo he puesto "partido" para que entrase en el post.

Entradas Relacionadas:

10 comentarios:


Waldo Jeria

Hola que tal, sin que tu sepas has sido de gran ayuda para mi, hace pocoq ue retome mi blog, ya que en un principio no sabia como editarlo y esas cosas, en estos momentos estoy en un proceso de enchulamiento para luego comenzar con las entradas y en fin, ser parte de esta gran maza de blogeros....Ahora me gustaria pedirte una ayudita, ya que tengo un problema. En mi blog, el titulo de las entradas mas algunas otras cosas estan invisibles hasta que se pasa por encima el mouse, COMO PUEDO ARREGLAR ESTO, muchas gracias

Anónimo

Hola Walaka y gracias por visitarme.

Mira, he estado viendo tu blog y con mi navegador (Firefox) se ve perfecto, con IExplorer, el título de las entradas no se ve, la fecha si la veo, cuando recargo la página a veces se ve y otras no...

He mirado en el código y aparentemente en el css no hay nada raro, de hecho lo he pegado en una de prueba y va bien, pero la parte del html es difícil controlarla solo desde ahí.

Si puedes, y te apetece, claro, podrías mandarme una copia de la plantilla a mi email (está arriba en la sidebar) para que pudiera probar.

Waldo Jeria

Muchas gracias, te mandare el dodigo de la plantilla, eres muy amable, espero alguna vez devolverte el favor, chaus..

Juan Diego Caballero

Hola Rosa, visito tu blog con cierta asiduidad, para ver si encuentro soluciones a los problemas del mío. Tu lenguaje es asequible y fácilmente comprensible (y aplicable) para quienes no somos informáticos. En relación con mi blog ENSEÑ-ARTE
(http://aprendersociales.blogspot.com/)quería preguntarte tres cosas concretas:
1) ¿Como haces para separar unos posts de otros con esas doble línea tan visual y ese almanaque tan icónico?
2) Mi blog dispone de un apartado ttitulado "temática", pero es ya superextenso y quizás agobie al lector. ¿No hay manera de organizarlo mediante menú despegable o de otra forma?
3) ¿Puede mi barra lateral tener líneas de separación horizontales(como la tuya, distintos colores de fondo que la principal, etc.?
Te agracederá tus comentarios.
Cordialmente
JDC

Anónimo

Hola juan diego!

El calendario lo he puesto añadiendo su url en date header. En esta parte de la plantilla:

h2.date-header {

añadí esta línea:
background: url(http://img178.imageshack.us/img178/1228/datevn4.png) center left no-repeat;

Esa es la url de mi calendario puedes cambiarla por la url del icono que quieras mostrar.

La doble línea que está bajo el título de mis post, la añadí colocando en:
h3.post-title {

esta línea:
border-bottom:3px double #993333;

en #993333 puedes poner el color que quieras para las líneas.

Para el menú despegable puedes usar alguno de los que publico en el blog...

En cuanto a lo de la sidebar, claro que puedes hacer esos cambios que dices, aunque para serte sincera, yo veo tu blog muy guapo como está, pero si quieres hacer algo de eso, te lo explicaré con gusto (aunque yo no lo haría) ;)

Juan Diego Caballero

Bueno, Rosa, después de leer a una maestra como tú, mejor no tocar demasiado el blog. Gracias por tu tiempo; como siempre, escribes de manera agradable para los neófitos como yo. Te haré caso y apenás tocaré mi blog, aunque lo del menú desplegable no va a quedarme más remedio.
Muchas gracias,
JDC

Anónimo

Hola Juan! Las gracias he de dartelas yo,por tus visitas y tus agradables comentarios...En realidad no soy maestra de nada, simplemente un día se "me dio" por destripar una plantilla y ya no pude parar...la gran mayoría de lo que publico en el blog está recogido de los verdader@s maestr@s. El problema es en muchos de estos "genios" escriben en su idioma, el inglés, yo procuro explicarlo lo mejor que se en el nuestro y, eso si, probarlo todo antes. En cuanto a tu blog, lo único que hice fue darte mi sincera opinión...yo lo veo precioso y muy bien estructurado, esa la verdad.

Juan Diego Caballero

Pues nada, Rosa, me ratifico en la de maestra de blogueros y te anuncio que seguiré entrando por aquí de vez en cuando.
Incluso me atrevería a proponerte algunos temas. Aquí va uno: ¿Cómo hacer para tener un menú horizontal tan simpático como el tuyo?
Saludos cordiales
JDC

Anónimo

Hola rosa, he visto un par de veces tu blog, coloque el codigo para el Fondo estatico en mi blog, pero me da error...mi blog es nuevo y quiero personalizarlo, he visto algunos con las columnas asi opacas como las de estas imagenes y quiero saber si sabes el codigo, tambien para que me expliques mejor como y donde colocar el codigo de el fondo, porque me da error muchas veces! no me acepta el codigo pues!

Anónimo

Pielkanelita , tu blog no es que sea nuevo, es que aún no tienes nada en el...tienes que entender, que así no puedo ayudarte. Ayudarte en eso me llevaría bastante tiempo, y si luego no te gusta como queda o cambias la plantilla porque aún no te has decidido, yo habría perdido un tiempo precioso que no me sobra, para ayudar a otros que ya tienen su blog en marcha.

No te preocupes tanto por el aspecto, cuando aún no has decidido de que va a tratar siquiera...

Publicar un comentario

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S