0

div の周りに境界線の画像を配置しようとしています。css-tricks のヒントに従いましたが、うまくいきません。これはページです: http://darylkeep.com/aanbod/

編集:div全体に1つではなく、コーナーに4つの小さな境界線が表示されます。どうしてこれなの？

また、これまでこのプロパティに出くわしたことがないので、これがまだこれを行う方法なのかどうかも疑問に思っています。より良い方法はありますか？前もって感謝します。

<div id="main-content">stuff</div>

.

#main-content {   
  margin-top: 30px; margin-bottom:30px; padding:20px 20px 20px 20px; width:80%;
  background:rgba(255, 255, 255, 0.7);  
  border-image-source: url(www.darylkeep.com/wp-content/themes/darylkeep/assets/images/wiggly_border_full.png); 
  -moz-border-image-source: url(www.darylkeep.com/wp-content/themes/darylkeep/assets/images/wiggly_border_full.png); 
  -webkit-border-image-source: url(www.darylkeep.com/wp-content/themes/darylkeep/assets/images/wiggly_border_full.png); 
  -o-border-image-source: url(www.darylkeep.com/wp-content/themes/darylkeep/assets/images/wiggly_border_full.png); 
  -ms-border-image-source: url(www.darylkeep.com/wp-content/themes/darylkeep/assets/images/wiggly_border_full.png); 
  border-image-slice:2,8% 1,7% 2,8% 1,7%; 
  border-image-repeat: stretch;
  border-image-width:100px;
  border-width:50px;
  border-style: solid;
}
4

3 に答える 3

1

読み込もうとしている画像が空白のようです。いずれにせよ、以下のコードはあなたが持っているものを簡略化したものです。 

#main-content {   
  border: 50px solid #cc4242;
	padding: 15px;
	border-image-source: url('http://codeitdown.com/samples/zigzag_red.png');
	border-image-slice: 10;
	border-image-repeat: round;
}
<div id="main-content">stuff</div>

于 2016-09-08T15:40:01.560 に答える
1

CSS

div{
width:300px;
height:auto;
padding:25px;
border:10px solid #999;
text-align:justify;
position:absolute;
top:25%; 
left:35%;
border-image:url(Light-green-elegant-embossed-frame-rectangular-powerpoint-border.png) 20 repeat;
}

HTML

<div>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
于 2016-09-08T16:01:27.567 に答える
0

リクエストを単純化しすぎたかどうかわかりませんが、次の解決策を検討していただけますか?

https://jsfiddle.net/5asgtLr3/

<html>
    <head>
        <style>
            div.border{
                background-image: url(http://www.darylkeep.com/wp-content/themes/darylkeep/assets/images/wiggly_border_full.png);
                background-size: 100% 100%;
                background-repeat: no-repeat;    
            }
            div.content{
                color:white;
                padding: 30px 40px 30px 40px;
            }
            body{
                background: black;
            }
        </style>
    </head>
    <body>
        <div class="border">
            <div class="content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a varius libero, at luctus urna. Donec vel hendrerit quam. Duis scelerisque orci ornare sapien pharetra commodo. Ut elementum nisl et vehicula elementum. Fusce porta arcu tincidunt nunc elementum pharetra. Ut vitae placerat est. Vivamus faucibus iaculis augue vel pharetra. Praesent vel vulputate ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris sodales porttitor lectus in sagittis. Donec in ligula lorem. Sed scelerisque, ipsum a maximus viverra, lectus sapien gravida libero, a facilisis erat felis eu magna.
            </div>
        </div>
    </body>
<html>
于 2016-09-08T15:36:30.557 に答える