Paano Alisin ang Larawan Background sa HTML: Simpleng Gabay

May mga pagkakataon na nais mong itakda ang background ng isang web page o i-edit ang isang elemento upang itong magmukhang mas aesthetically pleasing o upang bigyang-diin ang ilang partikular na bagay at iba pa.

‍

Subalit, hindi lahat ay kabisado itong gawin sa HTML. Narito ang iyong gabay kung paano matanggal ang background image sa HTML nang madali!

‍

Paano tanggalin ang background image sa HTML?

Narito ang mga hakbang na kailangan mong sundan upang alisin ang background image sa HTML:

‍

Hakbang 1: Gumawa ng HTML gamit ang isang <h2> na elemento at tatlong <div> na elemento. Para sa pangalawang <div>, gamitin ang isang "id" na "no-background."

‍

<h2>Example</h2>

<div></div>

<div id="no-background"></div>

<div></div>

‍

‍

Hakbang 2: Magdagdag ng CSS sa pamamagitan ng pagsisimula sa pagsasama ng estilo sa unang at huling <div> na elemento.

‍

Ilagay ang taas at lapad ng iyong <div> at pagkatapos ay tukuyin ang margin-bottom, mga katangian ng border, at background-color.

‍

At pagkatapos, gamitin ang background-image na may halagang "url." Pagkatapos nito, itakda ang background-repeat sa "no-repeat" at tapusin sa pamamagitan ng pagdagdag ng background-size.

‍

Narito kung paano ito maaaring magmukhang:

‍

div {

height: 170px;

width: 300px;

margin-bottom: 20px;

background-color: #CDCDCD;

border: 2px solid #CDCDCD;

background-image: url('https://images.unsplash.com/photo-1507919909716-c8262e491cde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60');

background-repeat: no-repeat;

background-size: 100%;

}

‍

‍

Hakbang 3: Sa huli, istayl ang <div> na may "id" na tinatawag na "no-background" at alisin ang background ng <div> elemento at itakda ang background-image property sa "none."

‍

div#no-background {

background-image: none;

}

‍

Maaaring ganito ang hitsura ng iyong buong code:

‍

<!DOCTYPE html>

<html>

<head>

<title>The title of the document</title>

<style>

div {

height: 170px;

width: 300px;

margin-bottom: 20px;

background-color: #CDCDCD;

border: 2px solid #CDCDCD;

background-image: url('https://images.unsplash.com/photo-1507919909716-c8262e491cde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60');

background-repeat: no-repeat;

background-size: 100%;

}

div#no-background {

background-image: none;

}

</style>

</head>

<body>

<h2>Example</h2>

<div></div>

<div id="no-background"></div>

<div></div>

</body>

</html>

‍

‍

At dito, matagumpay nang natanggal ang background mula sa iyong larawan!

‍

Tanggalin ang Background mula sa PNG, JPG, JPEG, at WebP na mga Larawan gamit ang Erase.bg:

Ang Erase.bg ay isang matalinong AI background remover at editing tool na tumutulong sa pagsusuri ng iyong mga larawan nang maayos. Sa Erase.bg, sinuman ay madaling makapagtanggal ng background mula sa isang larawan kahit hindi proficient sa teknikal na mga kasanayan. Magamit mo ang Erase.bg para tanggalin ang background mula sa mga larawang PNG, JPG, JPEG, at WebP.

‍

Upang alisin ang background mula sa mga format na ito, kailangan mong buksan ang Erase.bg sa pamamagitan ng website o i-download ang Erase.bg Application mula sa App Store (para sa mga iOS user) o Google Play Store (para sa mga Android user).

‍

Maaari mong madaling tanggalin ang background mula sa mga larawang WebP, PNG, JPG, at JPEG gamit ang Erase.bg:

‍

Hakbang 1: I-click ang dialogue box na naglalaman ng "Mag-upload ng Larawan," o maaari mo rin itong i-drag and drop sa pahina.

‍

Hakbang 2: May mensahe na lalabas sa screen na nagsasabing, "Uploading image, please wait..." at sa panahong ito, gagawin ng AI ng Erase.bg ang kanyang mahika upang alisin ang background mula sa larawan ng iyong pagpili.

‍

May mensahe na lalabas sa screen na nagsasabing, "Uploading image, please wait..." at sa panahong ito, gagawin ng AI ng Erase.bg ang kanyang mahika upang alisin ang background mula sa larawan ng iyong pagpili.‍

‍

Hakbang 3: Kung gusto mong tanggalin ang isang bagay o i-edit ang larawan, makikita mo ang Edit option sa taas-kanang sulok ng Background Removed image.

‍