0

我创建了一个 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;
}

主页.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>

我已经尝试了上面的代码。但是渐变完全改变了。任何人都可以帮我将图像对齐到渐变的左侧。作为 css 的新手。有人可以帮忙吗？

4

1 回答 1

1

这是你想要达到的目标吗？http://jsfiddle.net/PhilippeVay/VPjP9/

我在第一个渐变系列中添加了一个图像（我删除了那些沿着 apple.jpg，无法理解他们在那里做什么），background-image然后为这些多个图像（图像和渐变）编写background-position和。background-repeat

由于要管理许多供应商前缀，因此只需编写部件所需的内容background-image然后为所有浏览器编写一次background-position并且background-repeat不需要任何供应商前缀就更容易了。

于 2012-06-03T08:36:38.903 回答