পাঠ্য পটভূমি স্বচ্ছ তৈরি করা কিন্তু নিজে পাঠ্য নয়


87

সুতরাং আমি একটি সমস্যা হচ্ছে। আমি চারপাশে তাকিয়ে দেখলাম কিন্তু ভাগ্য নেই। আমি আমার শরীরের পটভূমিটি স্বচ্ছ করতে চাই তবে পাঠ্যটি স্বচ্ছ ছাড়াই। এখনই যেমন আছে আমি উভয়কেই একইরকম অস্বচ্ছতা বানাচ্ছি আমার কোডটি এখানে:

@charset "utf-8";
body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-color: #42413C;
    margin: 0;
    padding: 0;
    color: #000;
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { 
    padding: 0;
    margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;
    padding-right: 15px;
    padding-left: 15px;
    opacity:1;
}
a img { 
    border: none;
}
a:link {
    color: #42413C;
    text-decoration: underline;
}
a:visited {
    color: #6E6C64;
    text-decoration: underline;
}
a:hover, a:active, a:focus {
    text-decoration: none;
}
.container {
    width: 750px;
    margin: 0 auto;
}
.content {
    padding:20px;
    width:710px;
    position:relative;
    background:#CCC;
    opacity: 0.5;
}
.fltrt {
    float: right;
    margin-left: 8px;
}
.fltlft { 
    float: left;
    margin-right: 8px;
}
.clearfloat { 
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
.header {
    top:0%;
    width: 750px;
    height: 200px;
    background-image: url(images/header.png);
    background-repeat:no-repeat;
    background-position:center;
}
.navbar {
    height: 50px;
    width: 750px;
    position: relative;
    z-index: 2;
}
#bg {
    position: fixed;
    top: 25%;
    left: 15%;
    z-index: -1;
}
div {
display: block;
}

এখানে আমার ওয়েবসাইট (আপনার ইউআরএলে "tcraft.net" টাইপ করুন লিঙ্কটি ক্লিক করুন এটি আপনাকে একটি ফেসবুক পৃষ্ঠায় নিয়ে যাবে): http://tcraft.net/index.php আপনাকে ধন্যবাদ!


উত্তর:


174

এর opacityজন্য ব্যবহার করবেন না , ব্যাকগ্রাউন্ডটিকে কেবল আরজিবিএ-মানটিতে সেট করুন কেবল ব্যাকগ্রাউন্ডটিকে অর্ধ-স্বচ্ছ করতে। আপনার ক্ষেত্রে এটি এমন হবে।

.content {
    padding:20px;
    width:710px;
    position:relative;
    background: rgb(204, 204, 204); /* Fallback for older browsers without RGBA-support */
    background: rgba(204, 204, 204, 0.5);
}

CSS এর আরও তথ্যের জন্য এবং rgba- মানগুলির নমুনাগুলির জন্য http://css-tricks.com/rgba-browser-support/ দেখুন ।


কোনও ধারণা কীভাবে এটি পটভূমির চিত্র সহ অর্জন করবেন?
যুজુકા্যাট

পটভূমি চিত্রগুলির জন্য, আপনার চিত্র হিসাবে একটি আলফা চ্যানেল সহ কেবলমাত্র একটি পিএনজি বা ডাব্লুইইবিপি ব্যবহার করুন।
কার্ল-জোহান Sjögren

18

সম্পূর্ণ স্বচ্ছ পটভূমি ব্যবহারের জন্য:

background: transparent;

অন্যথায় একটি আধা স্বচ্ছ রঙ পূরণের জন্য:

background: rgba(255,255,255,0.5); // or hsla(0, 0%, 100%, 0.5)

মানগুলি যেখানে:

background: rgba(red,green,blue,opacity); // or hsla(hue, saturation, lightness, opacity)

গ্রেডিয়েন্ট ব্যাকগ্রাউন্ডের জন্য আপনি rgba মানগুলিও ব্যবহার করতে পারেন।

কোনও চিত্রের পটভূমিতে স্বচ্ছতা পেতে আপনার পছন্দমতো ইমেজ এডিটরটিতে চিত্রের অস্বচ্ছতা কমাতে হবে hand


2

opacityপাঠ্য এবং পটভূমি উভয় স্বচ্ছ করতে হবে। rgba()উদাহরণস্বরূপ একটি মান ব্যবহার করে পরিবর্তে একটি অর্ধ-স্বচ্ছ পটভূমি-রঙ ব্যবহার করুন । আইই 8 + এ কাজ করে


0

আপনি যদি আধুনিক ব্রাউজারগুলির জন্য আরজিবিএ ব্যবহার করেন তবে পুরানো আইইগুলিকে কেবল আরজিবি সহ প্রদত্ত রঙের স্বচ্ছ-সংস্করণ ব্যবহার করতে দেওয়া উচিত নয়।

আপনি যদি কেবল সিএসএস-এর সমাধানগুলিতে স্থির না হন তবে CSS3PIE ব্যবহার করে দেখুন। এই সিনট্যাক্সের সাহায্যে আপনি পুরানো আইইগুলিতে ঠিক একই ফলাফল দেখতে পাচ্ছেন যা আপনি আধুনিক ব্রাউজারগুলিতে দেখেন:

div {
    -pie-background: rgba(223,231,233,0.8);
    behavior: url(../PIE.htc);
}

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.