HTML / CSS - создать альфа-маску поверх изображения - PullRequest
Новая
       6

HTML / CSS - создать альфа-маску поверх изображения

5 голосов
/ 29 июля 2010

Я хотел бы создать эффект на создаваемом мной сайте, где изображение маскируется наложением.Наложение должно создавать эффект «затухания» - я на самом деле не хочу ничего анимированного, но наложение должно заставить изображение выглядеть так, как будто оно затухает до цвета фона по краям.

Примерно так:http://imgur.com/fqtc9.png

Я предпочитаю делать это с CSS / HTML / JS, а не с изображениями.Есть мысли о том, с чего начать?Спасибо.

Ответы [ 5 ]

4 голосов
/ 29 июля 2010

Вы можете сделать что-то вроде этого, например: Пример

html 

<div class="photo_container">
        <div class="photo">
<img src="/lakenwoods/images/mockup-photo.png" width="540" height="463" /></div>
        <div class="overlay">
            <div class="content">
                <h1>Welcome to Lake-N-Woods Realty</h1>
                <p>
                We are a Diverse and Highly Effective Real Estate Company, Dedicated to Satisfying all of our Clients Needs. We Specialize in Recreational, Rural and Investment Property throughout Bemidji and North Central Minnesota.
                </p>
                </div>
        </div>
        <div class="clear">
       </div>
   </div>

CSS 

@charset "utf-8";
/* CSS Document */

.clear {
    clear:both;     
}

.photo_container {
    position: relative;
    width: 540px;
    height: 463px;
    overflow:hidden;
    margin: 0; padding:0;
}

.photo_container .photo {
    z-index:1;

}


.photo_container .overlay {
    width: 540px;
    height: 463px;
    background: url(/lakenwoods/images/mockup-overlay.png) no-repeat top center;
    position:absolute;
    bottom: 0;
    left: 0;
    z-index:10;

}

.photo_container .overlay .content h1 {

    position:absolute;
    top: 310px;
    left: 34px;
    font-family: Helvetica, Helvetica Neue, Arial, sans-serif;
    font-size:18px;
    color: #fff;
    font-weight: 700;
    width: 315px;

}


.photo_container .overlay .content p {


    position:absolute;
    top: 335px;
    left: 34px;
    font-family: Helvetica, Helvetica Neue, Arial, sans-serif;
    font-size:12px;
    color: #fff;
    width: 315px;
    line-height: 1.4em; 

}
2 голосов
/ 29 июля 2010

Я знаю, что вы спрашиваете конкретно о решении CSS / JavaScript, и я уверен, что у вас есть свои причины.

Тем не менее, я просто хотел отбросить простое решение для одного файла блеклого изображения, как вы уже разместили в своем вопросе, без каких-либо необычных запрограммированных эффектов.

2 голосов
/ 29 июля 2010

Ах - исходя из вашего комментария к ответу антирата, лучше всего создать PNG-изображение, содержащее эффект (т.е. полупрозрачную белую форму), и расположить его поверх фактического изображения с помощью CSS (position:absolute и z-index будут участвовать).

В настоящее время нельзя создавать неквадратные фигуры, используя только HTML и CSS.

1 голос
/ 29 июля 2010

Начните с jQuery .Например, см. Функцию fadeIn .

Для статической альфа-маски поверх изображения используйте свойство opacity css: 

.myimage {
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); 
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
}
0 голосов
/ 29 июля 2010

Функция jQuery animate (с непрозрачностью) должна / может справиться с этим, хотя ответ антирата также должен работать, если вы просто затенете оверлей.

...