آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش مات کردن تصویر با css

آموزش CSS

آموزش مات کردن پس زمینه یک تصویر در سایت


در این مقاله می آموزید که چطور با استفاده از CSS و Html یک تصویر پس زمینه مات ایجاد کنید.


قدم اول : کد HTML را اضافه کنید.
مثال :


پس زمینه تار

دوره آموزش طراحی سایت

حضوری و آنلاین


قدم دوم :   کد CSS را اضافه کنید.
مثال :

body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

.bg-image {
  /* The image used */
  background-image: url("http://articles.tahlildadeh.com/image.axd?picture=1_15.jpg");

  /* Add the blur effect */
  filter: blur(8px);
  -webkit-filter: blur(8px);

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Position text in the middle of the page/image */
.bg-text {
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80%;
  padding: 20px;
  text-align: center;
}

                


نمونه مثال Blur Background Image:


<div class="bg-image"></div>

<div class="bg-text">
  <h2>پس زمینه تار</h2>
    <h1>دوره آموزش طراحی سایت</h1>
  <p>حضوری و آنلاین</p>
</div>
 

امتحان کنید

خروجی Blurred Background  

 آموزش مات کردن پس زمینه یک تصویر در سایت
  • 25
  •    0
  • تاریخ ارسال :   1400/01/11

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .