1

このサイトとまったく同じように、背景に 2 つの画像 (右側に 1 つの影の画像、左側にもう 1 つの影の画像) を繰り返そうとしています。

これまでのところ、CSS コードを正しく取得できません。

http://www.elegantthemes.com/preview/Modest/

そのサイトのコードを調べたところ、使用したい影の画像がありました。Headway を実行している WordPress サイトでエレガント テーマが使用しているコードを複製しようとしました。

.right-shadow { background: #ffffff url(images/right-shadow.png) repeat-y top right; }
.left-shadow { background:url(images/left-shadow.png) repeat-y top left; }

しかし、うまくいきませんでした。

それから私は試しました：

body {background:#ffffff url(http://website.com/wp-content/uploads/2012/07/right-shadow.png) repeat-y right top;}

これは正しい影の画像で機能しました-正しく表示されます

それから私は試しました

body {background:#ffffff url(http://websitebuddha.com/wp-content/uploads/2012/07/left-shadow.png) repeat-y left top;}

これは左の影の画像で機能しました-正しく表示されます

ここで、コードを組み合わせて、Y left と Y right に沿って両方の影の画像を表示しようとすると、次のようになります。

body {background:#ffffff url(http://website.com/wp-content/uploads/2012/07/right-shadow.png) repeat-y right top, url(http://website.com/wp-content/uploads/2012/07/left-shadow.png) repeat-y left top;}

機能しません - 両方の画像が表示されません

私もこれを試しました：

body {
    background-image: url(http://website.com/wp-content/uploads/2012/07/right-shadow.png), (http://website.com/wp-content/uploads/2012/07/left-shadow.png);
    background-repeat: repeat-y right top, repeat-y left top;
}

これも機能しません - 両方の画像が表示されません

Modest Theme by Elegant テーマとまったく同じように動作させるにはどうすればよいですか?

読んでくれてありがとう。

4

2 に答える 2

0

これがあなたがそれをすることができる1つの方法です。背景自体を使用しない。ただし、画像をdivの背景として配置することも、単にdiv内の画像として追加することもできます。divを廃止し、divの代わりに画像を使用することもできます。

http://jsfiddle.net/6UEXc/

お役に立てば幸いです。

于 2012-07-24T09:07:02.203 に答える
0

ソリューションに使用できると思いますMultiple Backgrounds。

background プロパティが見直され、 が可能になりましたmultiple backgrounds in CSS3。

CSS

body {
background: url(http://www.elegantthemes.com/preview/Modest/wp-content/themes/Modest/images/left-shadow.png) 0 0 repeat-y,  
 url(http://www.elegantthemes.com/preview/Modest/wp-content/themes/Modest/images/left-shadow.png)center right repeat-y;  
}

これがお役に立てば幸いです:- http://tinkerbin.com/Iw4yJ1H3

于 2012-07-24T09:04:10.597 に答える