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;
}

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>

私は上記のコードを試しましたが、グラデーションは完全に変更されました.誰かが画像をグラデーションの左側に揃えるのを手伝ってくれます.CSSが初めてなので、誰か助けてくれますか?

4

1 に答える 1

1

これはあなたが達成しようとしていることですか？http://jsfiddle.net/PhilippeVay/VPjP9/

プロパティを使用して、グラデーションの最初のシリーズに画像を追加し（apple.jpg に沿ったものを削除しました。そこで何をしているのか理解できませんでした）、これらの複数の画像（画像とグラデーション）に対してandbackground-imageを書きました。background-positionbackground-repeat

管理するベンダー プレフィックスは多数あるため、background-imageパーツに必要なものを記述し、すべてのブラウザーに対して 1 回記述する方が簡単です。これにはベンダー プレフィックスは必要background-positionありbackground-repeatません。

于 2012-06-03T08:36:38.903 に答える