Ichki tasvirni kiritish uchun CSS qalbini qanday o'zgartirish mumkin?

Shuning uchun men CSSda yurakka egaman. Lekin endi uni o'zgartirish va dinamik imidjni qo'shishni xohlayman. Mana nima bor:

.heart {
  position: relative;
  width: 100px;
  height: 90px;
  float: left;


width: 100px;
  height: 90px;
  overflow: hidden;
}

.heart.right {
    left: auto;
    right: 0;
}

.heart:before,
.heart:after {
  position: absolute;
  content: '';
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: #fc2e5a;
  border-radius: 50px 50px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}

.heart:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

Here is my fiddle: https://jsfiddle.net/9g1qswdd/

0
Shunday qilib, yuragingizni maska ​​kabi xohlaysizmi?
qo'shib qo'ydi muallif Stefan, manba
iltimos, nimaga erishmoqchi bo'lganingiz haqida bir necha qo'shimcha ma'lumotni ko'rsating.
qo'shib qo'ydi muallif ANshul Sharma, manba
Men qalbning ichiga bir tasvirni kiritishni xohlayman
qo'shib qo'ydi muallif Vlad Ivanov, manba
Ha, aniq ...
qo'shib qo'ydi muallif Vlad Ivanov, manba

7 javoblar

Barcha mavjud javoblar sizga joy ni yurak shaklida tasvirni joylashtirishga yordam beradi, ammo ekin kesib tashlamang yoki ni yurak shaklida kesib oling. Mavjud bo'lgan javob faqat klip-path modelidir, lekin bu kod turli xil chiqdi shaklini ishlab chiqaradi (ehtimol sizning savolingizga to'g'ridan-to'g'ri javob berishdan ko'ra qanday qilib ko'proq namunaga ega) .

Ko'zni yurak shakliga kiritish uchun (rasmni yurak shakliga aylantirishni nazarda tutgan deb hisoblayman) mavjud bo'lgan yondashuvni ishlatmang. Bu juda qiyin, chunki siz CSS uslubi ikki aylantirilgan elementdan foydalanib shaklni yaratadi. (A) vahiyni har ikkala tomonga ikkita bit (b) ga bo'linib ketish - (a) vahiyni har bir tomonga joylashtirishingiz kerak; (c) tasvirni dastlabki aylantirish effektini bekor qilish uchun rasmlarni teskari aylantirish element (d) tasvirning har bir yarimi uchun to'g'ri background-position ni belgilab qo'yadi. Shunday bo'lsa ham, bu muammolarni echib bo'lgach, href = "https://stackoverflow.com/questions/31456487/multiple-background-image-position/31456682#31456682"> parametr qiymati orqali background-position sozlamalari> biz nimaga ko'ra ko'proq ishlaydi o'ylayman.

Use SVG: SVG is the recommended tool for creating such complex shapes with a background that is not a solid color.

SVG bilan osonlikcha path elementini ishlatib murakkab shakllarni yaratishingiz mumkin va shuningdek, rasm qo'shish yoki plomba sifatida qo'shishingiz mumkin. SVGs o'lchamlarini o'zgartirishi mumkin va shuning uchun sezgir dizaynda juda foydali. SVG-lardan foydalanish, bizni shaklning o'zi ustidan nazoratni kuchaytirishga imkon beradi.

Quyida SVG yordamida yaratilgan va fon sifatida kiritilgan tasvirga ega bo'lgan yurak shaklidir.

<div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false"> <div class="snippet-code snippet-currently-hidden">

svg {
  height: 200px;
  width: 200px;
}
path {
  fill: url(#bg-image);
}
body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
 
 
 
 
 
 
 
</div> </div>

Quyida path elementining d xususiyati ishlatadigan buyruqlarning juda qisqa ta'rifi mavjud. Batafsil ma'lumotni bu MDN sahifasida topishingiz mumkin:

  • M - Moves pen to the point specified by the coordinate given immediately after the command.
  • A - Draw an arc with the specified X and Y radius, ending at the point specified after command.
  • L - Draw a straight line from one specified point to another.
  • z - Close the path by drawing a straight line from path's last point to its first point.

Bundan tashqari, quyidagi qismdagi kabi tasvirni qisqartirish uchun SVG asosidagi klip-yo'l ta'rifi ham foydalanishingiz mumkin, lekin klip-yo'l uchun brauzer qo'llab-quvvatlashi pastroq.

<div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false"> <div class="snippet-code snippet-currently-hidden">

img {
  -webkit-clip-path: url(#clipper);
  clip-path: url(#clipper);
}
body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
 
 
 
 
 
 

</div> </div>

5
qo'shib qo'ydi

Yurak mustahkam fon ustiga joylashtirilsa, pseudo elementlarga joylashtirilgan bir necha gradyanli tasvirni tanlab yashirishi mumkin.

Bu qopqoqdan foydalanishga imkon beradi yoki fon tasvir hajmida o'z ichiga oladi:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.heart2 {
  width: 300px;
  height: 300px;
  background-image: url(http://lorempixel.com/400/200);
  background-size: cover;
  position: relative;
  border: solid 1px red;
}

.heart2:before {
  content: '';
  position: absolute;
  width: 450px;
  height: 450px;
  left: -75px;
  top: 75px;
  transform: rotate(45deg);
  background-image: linear-gradient(white, white), linear-gradient(white, white);
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: right top, left bottom;
}

.heart2:after {
  position: absolute;
  width: 114%;
  height: 114%;
  content: '';
  left: -21px;
  bottom: 70px;
  transform: rotate(45deg);
  background-image: radial-gradient(circle at center 170px, transparent 85px, white 70px), radial-gradient(circle at 170px center, transparent 85px, white 75px), linear-gradient(white, white);
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: right top, left bottom, left top;
}
<div class="heart2"></div>
</div> </div>
1
qo'shib qo'ydi
@Harry Bilasizmi, agar siz CSS-da buni amalga oshirish qanchalik qiyin bo'lishi haqida gapirganingizda, uni sinashga moyilroq his qilaman.
qo'shib qo'ydi muallif vals, manba
Men sizni gradient asosida javob yozishni kutganman. Yahshisi!
qo'shib qo'ydi muallif Harry, manba

Sizning CSS kerak

.heart-img{
  position:absolute;
  width:40px;
  height:40px;
  top:20px;
  left:30px;
  z-index:1000;
}

html

<div class="heart">
  
</div>

https://jsfiddle.net/9g1qswdd/3/

0
qo'shib qo'ydi

Siz fon rasmini qo'shib qo'yishingiz mumkin va 5px tagacha qalbga o'tishingiz mumkin

.heart {
   background-image: url('');
} 
.heart:before,
.heart:after {
  top: 5px;
}
0
qo'shib qo'ydi

Agar qalbning ichida dinamik tasvirni qo'shishni istasangiz, unda bunday qilish kerak:

https://jsfiddle.net/kn1m081z/

Men tasvirni kattalashtirish uchun oddiy CSS-ni qo'shdim:

.heart img
{
position:relative;
z-index:3;
left:34px;
top:20px;
width:30px;
height:30px;
background:#ff5500
}

Tasvirni fon rangini berdim, shunda siz qaerda tasvirni ko'rishingiz mumkin - siz dinamik ravishda rasmni src-ni tasvir yorlig'iga qo'shganingizdan so'ng, men qo'shgandim, qalbning dinamik tasvirini ko'rasiz - bu sizning keyin!

0
qo'shib qo'ydi

CSS-ning clip-path xususiyatidan foydalanishni taklif qilaman. Men aloqa qutisini yaratishga harakat qildim:

.clip-path {
  clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

https://jsfiddle.net/9g1qswdd/5/

similarly you can try making a heart with clip-path property. To make life easier, you can use this tool to do that for you: http://bennettfeely.com/clippy/

0
qo'shib qo'ydi
videokameralar hozirgi paytda juda ko'pburchakdir, yumaloq yurak shakllari esa mumkin emas.
qo'shib qo'ydi muallif Stewartside, manba

img class "relative" va heart "mutlaq"

<div class="img"><div class="heart"></div></div>
0
qo'shib qo'ydi