Как сохранить фоновое изображение на градиенте css

Я создал css gradient.Am, пытаясь разместить изображение выше этого. Это мой код.Как сохранить фоновое изображение на градиенте css

style.css 
.body { 
    margin:0; 
    padding:0; 
    height:70%; 
    border-style:dotted solid; 
    border-color:#38FFBE; 
} 
.container { 
    height:90%; 
    position:relative; 
} 
.header { 
    padding:10px; 
    height:40%; 
    border-style:dotted solid; 
    border-color:#38FFBE; 
    background-image: linear-gradient(left bottom, rgb(95,255,41) 41%, rgb(156,255,255) 71%, rgb(232,171,235) 86%); 
    background-image: -o-linear-gradient(left bottom, rgb(95,255,41) 41%, rgb(156,255,255) 71%, rgb(232,171,235) 86%); 
    background-image: -moz-linear-gradient(left bottom, rgb(95,255,41) 41%, rgb(156,255,255) 71%, rgb(232,171,235) 86%); 
    background-image: -webkit-linear-gradient(left bottom, rgb(95,255,41) 41%, rgb(156,255,255) 71%, rgb(232,171,235) 86%); 
    background-image: -ms-linear-gradient(left bottom, rgb(95,255,41) 41%, rgb(156,255,255) 71%, rgb(232,171,235) 86%); 

background-image: -webkit-gradient(
    linear, 
    left bottom, 
    right top, 
    color-stop(0.41, rgb(95,255,41)), 
    color-stop(0.71, rgb(156,255,255)), 
    color-stop(0.86, rgb(232,171,235)) 
); 

background: url(apples.jpg) no-repeat left bottom, -moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7) ; 
background: url(apples.jpg) no-repeat left bottom, -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727)); 
} 
.body { 
    padding:10px; 
    padding-bottom:60px; /* Height of the footer */ 
    background-color:#CAFF70; 
} 
.footer { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:80px; /* Height of the footer */ 
    background:#CAFF70; 
}

home.jsp

<%@taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%> 
<%@taglib uri="/WEB-INF/struts-html.tld" prefix="html" %> 
<%@taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles"%> 
<html> 
<head> 
<title>MindBest</title> 
</head> 
<style type="text/css"> 
<%@include file="../include/style.css"%> 
</style> 
<body> 
<div class="container"> 
<div class="header">Header</div> 
<div class="body">Body</div> 
<div class="footer">Footer</div> 
</div> 
</body> 
</html>

Я попытался выше code.but градиента полностью changed.can кто-нибудь пожалуйста, помогите мне, чтобы выровнять изображение на левой стороне gradient.As новичок в css. Может кто-нибудь помочь?

источник

2012-06-03 rkhm

Свои срочные .. спасибо за помощь заблаговременно – rkhm

Это то, чего вы пытаетесь достичь? http://jsfiddle.net/PhilippeVay/VPjP9/

Я добавил изображение к первой серии градиентов (я удалил те, которые были по apple.jpg, не мог понять, что они там делали) со свойством background-image, а затем написал background-position и background-repeat для этих нескольких изображений (изображение и градиент).

Поскольку существует множество префиксов поставщика, чтобы управлять, это проще просто написать, что нужно для background-image части, а затем написать один раз для всех браузеров background-position и background-repeat, что не нуждаются в какой-либо префикс поставщика.

источник

2012-06-03 08:36:38 FelipeAls

Да, Фелипе пытается как-то попробовать это. Я хочу разместить несколько изображений и хотел бы выровнять на разных позициях. Как я могу выровнять это? – rkhm

Вы можете изменить значение «background-position», «background-position»: 50px center, left top, 'например. Прежде чем запятая будет приведена выше (ваше изображение) – FelipeAls

Thanx.tat works – rkhm

Как сохранить фоновое изображение на градиенте css

ответ

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