2015-07-13 6 views
0

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

У вас есть идея, как этого достичь? Я сделал простой plunker, чтобы показать, что я пытаюсь добиться (я попытался с: после того, как и: прежде, но без успеха)

http://plnkr.co/edit/rvD9ndy2OfY7kCxn0scP?p=preview

.myDiv{ 
    background-color : red; 
} 
.myOuterDiv:after{ 
    background-color : green; 
    content : " "; 
} 
.myOuterDiv:before{ 
    background-color : yellow; 
    content : " "; 
} 
+0

Ваш вопрос является неясным, каков ваш желаемый конечный результат? Возможно, вы могли бы предоставить изображение. И какой код вы уже пробовали? – crazymatt

+0

Ваша цель неясна. Изображение, чтобы проиллюстрировать вашу цель, поможет многое. – CChoma

ответ

1

While неясно, что вы собираетесь за, может быть, вы можете рассмотреть возможность использования фонового градиента с двумя центральными упорами справа друг на друга.

Нравится так. , ,

http://plnkr.co/edit/OMAfdVi3mK50M1nXNaR7?p=preview

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fff000+1,fff000+50,00ff00+51,00ff00+100 */ 
background: #fff000; /* Old browsers */ 
background: -moz-linear-gradient(left, #fff000 1%, #fff000 50%, #00ff00 51%, #00ff00 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, right top, color-stop(1%,#fff000), color-stop(50%,#fff000), color-stop(51%,#00ff00), color-stop(100%,#00ff00)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(left, #fff000 1%,#fff000 50%,#00ff00 51%,#00ff00 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(left, #fff000 1%,#fff000 50%,#00ff00 51%,#00ff00 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(left, #fff000 1%,#fff000 50%,#00ff00 51%,#00ff00 100%); /* IE10+ */ 
background: linear-gradient(to right, #fff000 1%,#fff000 50%,#00ff00 51%,#00ff00 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff000', endColorstr='#00ff00',GradientType=1); /* IE6-9 */ 
+0

Я решил это с помощью градиентов – endamaco

Смежные вопросы