Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Картинка в CSS (https://javascript.ru/forum/xhtml-html-css/65691-kartinka-v-css.html)

Slandewi 03.11.2016 00:14
Картинка в CSS
 
Вложений: 3
Всем привет.
Есть у меня вот такая форма (на скрине их 2)
http://javascript.ru/forum/attachmen...d=147812123 5
А вот её CSS:
.post{font-family: 'Ubuntu', sans-serif; color: #111111; background: #FFFFFF; margin-left: 5px; margin-right: 5px; border: 1px dashed #515151; border-radius: 5px; padding: 10px; margin-bottom: 10px;}

Мне нужно вставить картинку ножниц вот так:
http://javascript.ru/forum/attachmen...d=147812114 3
Не могли бы вы мне помочь?
P.S. форма сжимается с 800px в зависимости от размера окна (<=800)
Картинка ножниц, если что, вот:
http://javascript.ru/forum/attachmen...d=147812127 2

рони 03.11.2016 00:40
Slandewi,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .post{
    font-family:'Ubuntu',sans-serif;
    color:#111111;
    background:#FFFFFF;
    margin-left:5px;
    margin-right:5px;
    border:1px dashed #515151;
    border-radius:5px;
    padding:10px;
    margin-bottom:10px;
  }

  .post{
    margin:70px auto;
    position:relative;
    height:200px;
  }

  .post:after{
    content:"";
    background-image:url(http://savepic.net/8495682.jpg);
    background-repeat:no-repeat;
    background-size:cover;
    position:absolute;
    width:30px;
    height:28px;
    top:-16px;
    right:6px;
  }
  </style>

</head>

<body>
<form action="http://" class="post">

</form>

</body>
</html>

Slandewi 03.11.2016 11:18
Цитата:
Сообщение от рони (Сообщение 433864)
Slandewi,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .post{
    font-family:'Ubuntu',sans-serif;
    color:#111111;
    background:#FFFFFF;
    margin-left:5px;
    margin-right:5px;
    border:1px dashed #515151;
    border-radius:5px;
    padding:10px;
    margin-bottom:10px;
  }

  .post{
    margin:70px auto;
    position:relative;
    height:200px;
  }

  .post:after{
    content:"";
    background-image:url(http://savepic.net/8495682.jpg);
    background-repeat:no-repeat;
    background-size:cover;
    position:absolute;
    width:30px;
    height:28px;
    top:-16px;
    right:6px;
  }
  </style>

</head>

<body>
<form action="http://" class="post">

</form>

</body>
</html>
Ооо, спасибо!)

Pavel M. 05.11.2016 18:42
если не нужна поддержка старых IE
то уже можно попробовать использовать border-image
<!DOCTYPE html>
<html>
<head>
  <style>
  .post{
    padding: 20px;
    margin: 70px auto;
    height: 200px;
    outline: 1px dashed #515151;
    border: solid;
    border-image-source: url(http://savepic.net/8495682.jpg);
    border-image-width: auto auto 0 0;
    border-image-outset: 50px 0;
  }
  </style>
</head>
<body>
  <form action="http://" class="post">  </form>
</body>
</html>


Часовой пояс GMT +3, время: 07:02.